### C# Program Configuration for Blazor Bootstrap

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx

This C# program configures the Blazor WebAssembly host. It sets up the root components, adds an HttpClient for base address resolution, and crucially, registers the Blazor Bootstrap services with the dependency injection container.

```csharp
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using NET8.BlazorWebAssemblyStandaloneApp;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddBlazorBootstrap();

await builder.Build().RunAsync();
```

--------------------------------

### Blazor Image Component Alignment Examples

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/03-content/images.mdx

Provides examples of aligning images using the Blazor Image component with Bootstrap utility classes. This includes floating images to the start or end, centering block-level images, and centering images within a text container.

```cshtml
<Image Src="/images/placeholder.png" Class="rounded float-start" Alt="placeholder1" />
<Image Src="/images/placeholder.png" Class="rounded float-end" Alt="placeholder2" />
```

```cshtml
<Image Src="/images/placeholder.png" Class="rounded mx-auto d-block" Alt="placeholder" />
```

```cshtml
<div class="text-center">
    <Image Src="/images/placeholder.png" Class="rounded" Alt="placeholder" />
</div>
```

--------------------------------

### Install Blazor Bootstrap NuGet Package

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/01-getting-started/02-c-getting-started-maui-blazor-NET-7.mdx

Installs the Blazor Bootstrap NuGet package using the Package Manager Console. This is the first step to integrate the library into your project.

```shell
Install-Package Blazor.Bootstrap -Version 3.5.0
```

--------------------------------

### Google Map Examples

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/google-map.mdx

Provides code examples for implementing the Google Map component, including basic usage, adding markers, and customizing marker scaling.

```APIDOC
## Google Map Examples

### Description
Illustrative examples demonstrating how to use the Google Map component in Blazor applications.

### Example 1: Basic Google Map

```cshtml
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(-34.397, 150.644)"
           Height="400"
           Width="100"
           Zoom="8" />
```

### Example 2: Google Map with Markers

```cshtml
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> markers = new() {
        new GoogleMapMarker() {
            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
            Title = "Single family house with modern design"
        },
        new GoogleMapMarker() {
            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
            Title = "Townhouse with friendly neighbors"
        }
    };
}
```

### Example 3: Scaled Marker Customization

```cshtml
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> markers = new() {
        new GoogleMapMarker() {
            PinElement = new PinElement{ Scale = 1.5 },
            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
            Title = "Single family house with modern design"
        },
        new GoogleMapMarker() {
            PinElement = new PinElement{ Scale = 1.5 },
            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
            Title = "Townhouse with friendly neighbors"
        }
    };
}
```

### Request Example
See code blocks above for examples.

### Response
#### Success Response (200)
N/A (Component rendering)

#### Response Example
N/A
```

--------------------------------

### Blazor Placeholders Basic Example

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/placeholders.mdx

Demonstrates the basic usage of Blazor Bootstrap's `PlaceholderContainer` and `Placeholder` components to create loading placeholders. This example shows how to set the animation for the container and define the width of individual placeholders.

```cshtml
<PlaceholderContainer Animation="PlaceholderAnimation.Glow">
    <Placeholder Width="PlaceholderWidth.Col7" />
    <Placeholder Width="PlaceholderWidth.Col9" />
    <Placeholder Width="PlaceholderWidth.Col6" />
    <Placeholder Width="PlaceholderWidth.Col7" />
</PlaceholderContainer>
```

--------------------------------

### Install Blazor Bootstrap via .NET CLI and Package Manager Console

Source: https://context7.com/vikramlearning/blazorbootstrap/llms.txt

Instructions for installing the Blazor Bootstrap NuGet package using either the .NET CLI or the Package Manager Console in Visual Studio. This is the first step to integrate the library into your Blazor project.

```bash
# Install via .NET CLI
dotnet add package Blazor.Bootstrap --version 3.5.0

# Or via Package Manager Console
Install-Package Blazor.Bootstrap -Version 3.5.0
```

--------------------------------

### HTML Structure for Blazor Bootstrap App

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx

This HTML file sets up the basic structure for a Blazor WebAssembly application. It includes links to Bootstrap CSS, Bootstrap Icons, Blazor Bootstrap CSS and JS, and other necessary JavaScript libraries like Chart.js and Sortable.js.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NET8.BlazorWebAssemblyStandaloneApp</title>
    <base href="/" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="NET8.BlazorWebAssemblyStandaloneApp.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
    <!-- Add chart.js reference if chart components are used in your application. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Add sortable.js reference if SortableList component is used in your application. -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
</body>

</html>
```

--------------------------------

### Add Script References to index.html

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx

Includes necessary JavaScript references in the body section of wwwroot/index.html, after the blazor.webassembly.js reference. This includes Bootstrap's JavaScript, and optional references for Chart.js, chartjs-plugin-datalabels, and Sortable.js if their respective components are used.

```javascript
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
<!-- Add chart.js reference if chart components are used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add sortable.js reference if SortableList component is used in your application. -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
```

--------------------------------

### Blazor Bootstrap Grid Data Provider Implementation (C#)

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/grid.mdx

This C# code provides an example of implementing the data provider for a Blazor Bootstrap Grid. It includes logic to fetch employee data and apply client-side filtering, sorting, and paging using the GridDataProviderRequest.

```csharp
@code {
    private IEnumerable<Employee2>? employees;

    private async Task<GridDataProviderResult<Employee2>> EmployeesDataProvider(GridDataProviderRequest<Employee2> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee2> GetEmployees()
    {
        return new List<Employee2>
        {
            new Employee2 { Id = 107, Name = "Alice", Designation = "AI Engineer", Salary = 7700, IsActive = true },
            new Employee2 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", Salary = 19000, IsActive = true },
            new Employee2 { Id = 106, Name = "John", Designation = "Data Engineer", Salary = 12000, IsActive = true },
            new Employee2 { Id = 104, Name = "Pop", Designation = "Associate Architect", Salary = 19000, IsActive = false },
            new Employee2 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", Salary = 16500.50M, IsActive = true },
            new Employee2 { Id = 102, Name = "Line", Designation = "Architect", Salary = 24000, IsActive = true },
            new Employee2 { Id = 101, Name = "Daniel", Designation = "Architect", Salary = 21000, IsActive = true },
            new Employee2 { Id = 108, Name = "Zayne", Designation = "Data Analyst", Salary = 17850, IsActive = true },
            new Employee2 { Id = 109, Name = "Isha", Designation = "App Maker", Salary = 8000, IsActive = true },
        };
    }
}
```

--------------------------------

### Configure Blazor App with Blazor Bootstrap (C#)

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx

Configures the Blazor application services and request pipeline, including adding Blazor Bootstrap services. This is typically done in the Program.cs file of a Blazor Server or Blazor WebAssembly project.

```csharp
using Net8.BlazorAutoGlobal.Client.Pages;
using Net8.BlazorAutoGlobal.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

builder.Services.AddBlazorBootstrap();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Counter).Assembly);

app.Run();

```

```csharp
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddBlazorBootstrap();

await builder.Build().RunAsync();

```

--------------------------------

### Basic Blazor Carousel Example

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/carousel.mdx

A fundamental example demonstrating how to implement a Blazor Carousel with three slides. It utilizes the Carousel and CarouselItem components to display images.

```cshtml
<Carousel>
    <CarouselItem Active="true">
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
    </CarouselItem>
    <CarouselItem>
        <Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
    </CarouselItem>
</Carousel>
```

--------------------------------

### Blazor Callout Component Examples

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/callout.mdx

Demonstrates the usage of the Blazor Bootstrap Callout component with different predefined types (Danger, Warning, Info, Tip) and a default type. Each example shows how to render content within the callout.

```cshtml
<Callout>
    <strong>This is a default callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Danger">
    <strong>This is an danger callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Warning">
    <strong>This is an warning callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Info">
    <strong>This is an info callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Tip">
    <strong>This is an tip callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>
```

--------------------------------

### Placeholder Examples

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/placeholders.mdx

Demonstrates various ways to use Blazor Bootstrap placeholders, including width, color, sizing, and animation.

```APIDOC
## Placeholder Examples

### Description

This section provides code examples for using Blazor Bootstrap placeholders, showcasing different customization options.

### Examples

#### Width Customization

```cshtml
<Placeholder Width="PlaceholderWidth.Col6" />
<Placeholder Class="w-75" />
<Placeholder Style="width: 25%;" />
```

#### Color Customization

```cshtml
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Primary" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Secondary" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Success" />
```

#### Sizing Customization

```cshtml
<Placeholder Width="PlaceholderWidth.Col12" />
<Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Large" />
<Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Small" />
```

#### Animation Examples

```cshtml
<PlaceholderContainer Animation="PlaceholderAnimation.Glow">
    <Placeholder Width="PlaceholderWidth.Col12" />
</PlaceholderContainer>

<br />

<PlaceholderContainer Animation="PlaceholderAnimation.Wave">
    <Placeholder Width="PlaceholderWidth.Col12" />
</PlaceholderContainer>
```

### Response

#### Success Response (200)

N/A (This is a UI component, not an API endpoint)

#### Response Example

N/A
```

--------------------------------

### Basic Blazor Card Example

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/card.mdx

Demonstrates a basic Blazor Card component with a fixed width, title, text, and a button. This example shows how to structure content within a card using nested components like CardBody, CardTitle, CardText, and Button.

```cshtml
<Card Style="width:18rem;">
    <CardBody>
        <CardTitle>Card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
        <Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
    </CardBody>
</Card>
```

--------------------------------

### Blazor Bootstrap Callout Component Examples

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/callout.mdx

This snippet demonstrates various configurations of the Blazor Bootstrap Callout component. It includes examples for default, danger, warning, info, and tip callouts, all containing large text content. The code emphasizes accessible design by suggesting alternative text for color-based information.

```cshtml
<Callout>
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Type="CalloutType.Danger">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Type="CalloutType.Warning">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Type="CalloutType.Info">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Type="CalloutType.Tip">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>
```

--------------------------------

### Blazor WebAssembly Layout Setup with Blazor Bootstrap

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/02-layout/getting-started-webassembly.mdx

This code snippet demonstrates how to replace the default MainLayout.razor file in a Blazor WebAssembly project to integrate Blazor Bootstrap components. It sets up a sticky header, a custom sidebar with a logo and navigation items, a content section for the application's body, and a footer. The sidebar data is dynamically loaded using a DataProvider.

```cshtml
@inherits LayoutComponentBase

<BlazorBootstrapLayout StickyHeader="true">
    <HeaderSection>
        <ThemeSwitcher Class="ps-3 ps-lg-2" />
    </HeaderSection>

    <SidebarSection>
        <Sidebar2 Href="/"
                  ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
                  Title="Blazor Bootstrap"
                  BadgeText="3.5.0"
                  DataProvider="Sidebar2DataProvider"
                  WidthUnit="Unit.Px" />
    </SidebarSection>

    <ContentSection>
        @Body
    </ContentSection>

    <FooterSection>
        Footer links...
    </FooterSection>
</BlazorBootstrapLayout>

@code {
    private IEnumerable<NavItem> navItems = default!;

    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
            new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
            new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
        };

        return navItems;
    }
}
```

--------------------------------

### Blazor Server MainLayout Setup with Blazor Bootstrap

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/02-layout/getting-started-server.mdx

This code snippet replaces the default MainLayout.razor page to integrate Blazor Bootstrap components for a structured application layout. It includes a sticky header with a theme switcher, a sidebar with navigation items, and a content section for the main application body. The sidebar data is dynamically loaded using a DataProvider.

```cshtml
@inherits LayoutComponentBase

<BlazorBootstrapLayout StickyHeader="true">
    <HeaderSection>
        <ThemeSwitcher Class="ps-3 ps-lg-2" />
    </HeaderSection>

    <SidebarSection>
        <Sidebar2 Href="/"
                  ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
                  Title="Blazor Bootstrap"
                  BadgeText="3.5.0"
                  DataProvider="Sidebar2DataProvider"
                  WidthUnit="Unit.Px" />
    </SidebarSection>

    <ContentSection>
        @Body
    </ContentSection>

    <FooterSection>
        Footer links...
    </FooterSection>
</BlazorBootstrapLayout>

@code {
    private IEnumerable<NavItem> navItems = default!;

    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
                   {
                       new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
                       new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
                       new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
                   };

        return navItems;
    }
}
```

--------------------------------

### Blazor Grid Data Provider and User Model with Guid

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/grid.mdx

This C# code defines the Blazor component's logic, including the Grid's data provider, user data retrieval, and the User record class with a Guid property. It handles client-side filtering, sorting, and paging for the User data.

```csharp
@code {
    BlazorBootstrap.Grid<User> grid = default!;
    private IEnumerable<User> users = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task<GridDataProviderResult<User>> UsersDataProvider(GridDataProviderRequest<User> request)
    {
        if (users is null) // pull employees only one time for client-side filtering, sorting, and paging
            users = GetUsers(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(users));
    }

    private IEnumerable<User> GetUsers()
    {
        return new List<User>
        {
            new User { Oid = Guid.NewGuid(), Id = 107, Name = "Alice", DOB = new DateOnly(1998, 11, 17), Status = UserStatus.Registered },
            new User { Oid = Guid.NewGuid(), Id = null, Name = "Bob", DOB = new DateOnly(1985, 1, 5), Status = UserStatus.Verified },
            new User { Oid = Guid.NewGuid(), Id = 106, Name = "John", DOB = new DateOnly(1995, 4, 17), Status = UserStatus.Registered },
            new User { Oid = Guid.NewGuid(), Id = 104, Name = "Pop", DOB = new DateOnly(1985, 6, 8), Status = UserStatus.Registered },
            new User { Oid = Guid.NewGuid(), Id = 105, Name = "Ronald", DOB = new DateOnly(1991, 8, 23), Status = UserStatus.VerificationPending },
            new User { Oid = Guid.NewGuid(), Id = 102, Name = "Line", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.VerificationPending },
            new User { Oid = Guid.NewGuid(), Id = 101, Name = "Daniel", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.Registered },
            new User { Oid = Guid.NewGuid(), Id = 108, Name = "Zayne", DOB = new DateOnly(1991, 1, 1), Status = UserStatus.Verified },
            new User { Oid = Guid.NewGuid(), Id = 109, Name = "Isha", DOB = null, Status = UserStatus.Verified },
            new User { Oid = Guid.NewGuid(), Id = 110, Name = "Vijay", DOB = new DateOnly(1990, 7, 1), Status = UserStatus.Verified },
        };
    }

    public record class User
    {
        public Guid Oid { get; set; }
        public int? Id { get; set; }
        public string? Name { get; set; }
        public DateOnly? DOB { get; set; }
        public UserStatus Status { get; set; }
    }

    public enum UserStatus
    {
        Registered,
        VerificationPending,
        Verified
    }
}
```

--------------------------------

### Blazor Data Provider for Grid Filtering

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/05-components/grid.mdx

This C# code defines the data provider for the Blazor Bootstrap Grid, enabling client-side filtering. It initializes a list of `Employee1` objects and provides a `DataProvider` method that applies the filtering and sorting logic from the `GridDataProviderRequest` to the in-memory collection. This setup is essential for the grid to function correctly with client-side operations.

```cs
@code {
    private IEnumerable<Employee1> employees;

    protected override void OnInitialized()
    {
        employees = new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        return await Task.FromResult(request.ApplyTo(employees));
    }
}
```

--------------------------------

### Configure Blazor Program Entry Point (Program.cs)

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/01-getting-started/02-b-getting-started-server-NET-7.mdx

The Program.cs file is the entry point for the Blazor Server application. It configures the service container, registers necessary services like Blazor Server, WeatherForecastService, and Blazor Bootstrap, and sets up the HTTP request pipeline, including routing and static file serving.

```csharp
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using NET7.BlazorServerApp.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddBlazorBootstrap();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

```

--------------------------------

### Configure Line Chart with German Locale (Blazor)

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/06-data-visualization/doughnut-chart.mdx

This Blazor component example demonstrates how to initialize and configure a Line Chart with specific options, including setting the locale to German ('de-DE'). It defines chart data, datasets for different operating systems, and scale/plugin titles. The chart is rendered using the BlazorBootstrap library.

```cshtml
@using BlazorBootstrap.Extensions
@using Color = System.Drawing.Color

<LineChart @ref="lineChart" Width="800" Class="mb-4" />

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.CategoricalTwelveColors;

        var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new LineChartDataset()
            {
                Label = "Windows",
                Data = new List<double> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[0] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
        datasets.Add(dataset1);

        var dataset2 = new LineChartDataset()
            {
                Label = "macOS",
                Data = new List<double> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[1] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
        datasets.Add(dataset2);

        var dataset3 = new LineChartDataset()
            {
                Label = "Other",
                Data = new List<double> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[2] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
        datasets.Add(dataset3);

        chartData = new ChartData
            {
                Labels = labels,
                Datasets = datasets
            };

        lineChartOptions = new();
        lineChartOptions.Locale = "de-DE";
        lineChartOptions.Responsive = true;
        lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };

        lineChartOptions.Scales.X.Title.Text = "2019";
        lineChartOptions.Scales.X.Title.Display = true;

        lineChartOptions.Scales.Y.Title.Text = "Visitors";
        lineChartOptions.Scales.Y.Title.Display = true;

        lineChartOptions.Plugins.Title.Text = "Operating system";
        lineChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}
```

--------------------------------

### Blazor: Button with Font Awesome Icon

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/03-content/icons.mdx

Illustrates using Font Awesome icons within Blazor Bootstrap buttons. This requires proper setup of Font Awesome in your project. The example shows buttons with tooltips for added context.

```cshtml
<Button Color="ButtonColor.Secondary" TooltipTitle="Compare code">
    <Icon CustomIconName="fa-solid fa-code-compare"/>
</Button>
<Button Color="ButtonColor.Secondary" TooltipTitle="Create pull request">
    <Icon CustomIconName="fa-solid fa-code-pull-request" />
</Button>
```

--------------------------------

### Blazor Confirm Dialog Component Example

Source: https://context7.com/vikramlearning/blazorbootstrap/llms.txt

Demonstrates how to use the ConfirmDialog component to display confirmation prompts before executing destructive actions. It requires a reference to the ConfirmDialog component and handles user confirmation asynchronously.

```razor
@page "/confirm-demo"

<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Danger" @onclick="ShowConfirmation">Delete Record</Button>

@code {
    private ConfirmDialog dialog = default!;

    private async Task ShowConfirmation()
    {
        var confirmation = await dialog.ShowAsync(
            title: "Are you sure?",
            message1: "This will permanently delete the record.",
            message2: "This action cannot be undone.",
            confirmDialogOptions: new ConfirmDialogOptions
            {
                YesButtonText = "Delete",
                YesButtonColor = ButtonColor.Danger,
                NoButtonText = "Cancel",
                NoButtonColor = ButtonColor.Secondary
            }
        );

        if (confirmation)
        {
            // Perform delete operation
            Console.WriteLine("Record deleted!");
        }
    }
}
```

--------------------------------

### Blazor Layout with Sidebar and Navigation

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx

This Blazor component defines the main application layout, incorporating a sidebar for navigation and a main content area. It utilizes Blazor Bootstrap's Sidebar component and dynamically fetches navigation items.

```razor
@inherits LayoutComponentBase

<div class="bb-page">

    <Sidebar @ref="sidebar"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-end">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">@Body</div>
        </article>
    </main>

</div>

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
            new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
            new NavItem { Id = "3", Href = "/weather", IconName = IconName.Table, Text = "Fetch Data"},
        };

        return navItems;
    }
}
```

--------------------------------

### Blazor Modal Service: Setup and Usage

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/07-services/modal.mdx

Provides instructions for setting up and using the Blazor Bootstrap Modal Service. It involves adding the `Modal` component to `MainLayout.razor`, injecting `ModalService`, and calling `ShowAsync` with a `ModalOption` object. Error handling with different modal types is also demonstrated.

```cshtml
@inherits LayoutComponentBase

...

... MainLayour.razor code goes here ...

...

<Modal IsServiceModal="true" />
```

```cs
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task SaveEmployeeAsync()
    {
        try
        {
            // call the service/api to save the employee details

            var modalOption = new ModalOption
                              {
                                  Title = "Save Employee",
                                  Message = "Employee details saved.",
                                  Type = ModalType.Success
                              };

            await ModalService.ShowAsync(modalOption);
        }
        catch(Exception ex)
        {
            // handle exception

            var modalOption = new ModalOption
                              {
                                  Title = "Save Employee",
                                  Message = $"Error: {ex.Message}.",
                                  Type = ModalType.Danger
                              };

            await ModalService.ShowAsync(modalOption);
        }
    }
}
```

--------------------------------

### Import Blazor Bootstrap Components (Razor)

Source: https://github.com/vikramlearning/blazorbootstrap/blob/main/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx

Imports necessary namespaces for Blazor components, including Blazor Bootstrap, to be used across the application. This file is essential for making Blazor Bootstrap components available in your .razor files.

```razor
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Net8.BlazorAutoGlobal
@using Net8.BlazorAutoGlobal.Client
@using Net8.BlazorAutoGlobal.Components
@using BlazorBootstrap;

```

```razor
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Net8.BlazorAutoGlobal.Client
@using BlazorBootstrap;

```