### Install CLI Template

Source: https://github.com/dotnetcore/bootstrapblazor/blob/main/src/BootstrapBlazor/readme.md

Install the Bootstrap Blazor CLI template globally using the .NET CLI.

```bash
dotnet new install Bootstrap.Blazor.Templates::*
```

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

### Install Bootstrap Blazor Package

Source: https://github.com/dotnetcore/bootstrapblazor/blob/main/src/BootstrapBlazor/readme.md

Use the .NET CLI to add the BootstrapBlazor package to your project.

```bash
dotnet add package BootstrapBlazor
```

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

### Create Project with CLI Template

Source: https://github.com/dotnetcore/bootstrapblazor/blob/main/src/BootstrapBlazor/readme.md

Generate a new Blazor project pre-configured with Bootstrap Blazor using the installed template.

```bash
dotnet new bbapp
```

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

### Implement IDataService for Data Grid Operations

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Implement the IDataService<TModel> interface to provide CRUD operations for Blazor data grids like Table<TItem>. This example shows a concrete implementation for managing Product data, including querying, saving, and deleting.

```csharp
// MyProductDataService.cs
public class MyProductDataService : DataServiceBase<Product>
{
    private readonly AppDbContext _db;
    public MyProductDataService(AppDbContext db) => _db = db;

    public override async Task<QueryData<Product>> QueryAsync(QueryPageOptions options)
    {
        var query = _db.Products.AsQueryable();

        if (!string.IsNullOrEmpty(options.SearchText))
            query = query.Where(p => p.Name.Contains(options.SearchText));

        if (options.SortName == nameof(Product.Price))
            query = options.SortOrder == SortOrder.Asc
                ? query.OrderBy(p => p.Price)
                : query.OrderByDescending(p => p.Price);

        var total = await query.CountAsync();
        var items = await query
            .Skip((options.PageIndex - 1) * options.PageItems)
            .Take(options.PageItems)
            .ToListAsync();

        return new QueryData<Product> { Items = items, TotalCount = total };
    }

    public override async Task<bool> SaveAsync(Product model, ItemChangedType type)
    {
        if (type == ItemChangedType.Add)
            _db.Products.Add(model);
        else
            _db.Products.Update(model);
        return await _db.SaveChangesAsync() > 0;
    }

    public override async Task<bool> DeleteAsync(IEnumerable<Product> models)
    {
        _db.Products.RemoveRange(models);
        return await _db.SaveChangesAsync() > 0;
    }
}
```

```csharp
// Program.cs registration
builder.Services.AddScoped<IDataService<Product>, MyProductDataService>();
```

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

### Basic Component Usage

Source: https://github.com/dotnetcore/bootstrapblazor/blob/main/src/BootstrapBlazor/readme.md

Example of using the Display and Button components in a Blazor component. The Button's OnClick event updates a string displayed by the Display component.

```razor
<Display Value="@_text"></Display>
<Button Text="Button" OnClick="@ClickButton"></Button>

@code {
    private string? _text;
    private void ClickButton(MouseEventArgs e)
    {
        _text = DateTime.Now.ToString();
    }
}
```

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

### Configure MainLayout.razor

Source: https://github.com/dotnetcore/bootstrapblazor/blob/main/src/BootstrapBlazor/readme.md

Wrap your application's content with BootstrapBlazorRoot in MainLayout.razor to enable component functionality.

```html
<BootstrapBlazorRoot>
    @Body
</BootstrapBlazorRoot>
```

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

### Register Services in Program.cs

Source: https://github.com/dotnetcore/bootstrapblazor/blob/main/src/BootstrapBlazor/readme.md

Add the necessary Bootstrap Blazor services to your application's service collection in Program.cs.

```csharp
builder.Services.AddBootstrapBlazor();
```

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

### Add JavaScript Reference

Source: https://github.com/dotnetcore/bootstrapblazor/blob/main/src/BootstrapBlazor/readme.md

Add the Bootstrap Blazor JavaScript bundle at the end of the body in your main HTML file.

```html
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
```

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

### Layout Component with Header, Footer, and Sidebar

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Implement an application shell using the Layout component. Configure sidebar menus, header, footer, and content area. Integrates with AuthorizeView for role-based menu rendering.

```razor
<Layout SideMenuItems="@_menus"
        IsFullSide="true"
        ShowFooter="true"
        ShowGotoTop="true"
        TabDefaultUrl="/dashboard"
        OnAuthorizing="@OnAuthorizing">
    <Header>
        <span>My Enterprise App</span>
    </Header>
    <Footer>
        <span>© 2024 My Company</span>
    </Footer>
    <NotAuthorized>
        <RedirectToLogin />
    </NotAuthorized>
</Layout>

@code {
    private List<MenuItem> _menus = new()
    {
        new MenuItem { Text = "Dashboard",  Url = "/dashboard",  Icon = "fa-solid fa-gauge" },
        new MenuItem { Text = "Products",   Url = "/products",   Icon = "fa-solid fa-box"   },
        new MenuItem { Text = "Orders",     Url = "/orders",     Icon = "fa-solid fa-list"  },
    };

    private Task<bool> OnAuthorizing(string url)
    {
        // Return false to redirect to NotAuthorized content
        return Task.FromResult(true);
    }
}
```

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

### Add CSS Reference

Source: https://github.com/dotnetcore/bootstrapblazor/blob/main/src/BootstrapBlazor/readme.md

Include the Bootstrap Blazor CSS bundle in the head section of your main HTML file (index.html or _Layout.cshtml/_Host.cshtml/App.razor).

```html
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" />
```

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

### PrintService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

PrintService opens a dialog for print-preview purposes, reusing DialogService internally to render any content in a printable modal.

```APIDOC
## PrintService

`PrintService` opens a dialog for print-preview purposes, reusing `DialogService` internally to render any content in a printable modal.

```razor
@inject PrintService PrintService

<Button Text="Print Report" OnClick="@DoPrint" />

@code {
    private async Task DoPrint(MouseEventArgs e)
    {
        await PrintService.PrintAsync(new DialogOption
        {
            Title        = "Monthly Report",
            BodyTemplate = builder =>
            {
                builder.OpenElement(0, "div");
                builder.AddAttribute(1, "class", "print-content");
                builder.AddContent(2, "Sales data for October 2024...");
                builder.CloseElement();
            },
        });
    }
}
```
```

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

### Print Content with PrintService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Use PrintService to open a print-preview dialog. It internally uses DialogService to render content in a printable modal.

```razor
@inject PrintService PrintService

<Button Text="Print Report" OnClick="@DoPrint" />

@code {
    private async Task DoPrint(MouseEventArgs e)
    {
        await PrintService.PrintAsync(new DialogOption
        {
            Title        = "Monthly Report",
            BodyTemplate = builder =>
            {
                builder.OpenElement(0, "div");
                builder.AddAttribute(1, "class", "print-content");
                builder.AddContent(2, "Sales data for October 2024...");
                builder.CloseElement();
            },
        });
    }
}
```

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

### DialogService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

DialogService programmatically opens modal dialogs with custom content, templates, save/close callbacks, and supports stacking multiple dialogs. Use it by injecting the service and calling Show.

```APIDOC
## DialogService

`DialogService` programmatically opens modal dialogs with custom content, templates, save/close callbacks, and supports stacking multiple dialogs. Use it by injecting the service and calling `Show`.

```razor
@inject DialogService DialogService

<Button Text="Open Dialog" OnClick="@OpenDialog" />

@code {
    private async Task OpenDialog(MouseEventArgs e)
    {
        await DialogService.Show(new DialogOption
        {
            Title           = "Confirm Action",
            BodyTemplate    = builder => builder.AddContent(0, "Are you sure you want to proceed?"),
            Size            = Size.Medium,
            IsKeyboard      = true,
            IsBackdrop      = false,
            CloseButtonText = "Cancel",
            SaveButtonText  = "Confirm",
            OnSaveAsync     = async () =>
            {
                Console.WriteLine("User confirmed.");
                return true; // return false to keep the dialog open
            },
            OnCloseAsync    = async () => Console.WriteLine("Dialog closed."),
        });
    }
}
```
```

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

### Open Modals with DialogService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Inject DialogService to programmatically open modal dialogs. Customize content, templates, save/close callbacks, and stacking behavior.

```razor
@inject DialogService DialogService

<Button Text="Open Dialog" OnClick="@OpenDialog" />

@code {
    private async Task OpenDialog(MouseEventArgs e)
    {
        await DialogService.Show(new DialogOption
        {
            Title           = "Confirm Action",
            BodyTemplate    = builder => builder.AddContent(0, "Are you sure you want to proceed?"),
            Size            = Size.Medium,
            IsKeyboard      = true,
            IsBackdrop      = false,
            CloseButtonText = "Cancel",
            SaveButtonText  = "Confirm",
            OnSaveAsync     = async () =>
            {
                Console.WriteLine("User confirmed.");
                return true; // return false to keep the dialog open
            },
            OnCloseAsync    = async () => Console.WriteLine("Dialog closed."),
        });
    }
}
```

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

### Configure Table Component with Data Service

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Set up a data grid with paging, sorting, filtering, and editing capabilities. Integrates with IDataService for CRUD operations. Define columns and data handling logic.

```razor
<Table TItem="Employee"
       OnQueryAsync="@OnQueryAsync"
       IsPagination="true"
       PageItemsSource="@(new int[] { 10, 20, 50 })"
       IsStriped="true"
       IsBordered="true"
       ShowToolbar="true"
       ShowSearch="true"
       IsMultipleSelect="true"
       OnSaveAsync="@OnSaveAsync"
       OnDeleteAsync="@OnDeleteAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.Id"   Visible="false" />
        <TableColumn @bind-Field="@context.Name" Sortable="true" Filterable="true" />
        <TableColumn @bind-Field="@context.Age"  Sortable="true" />
        <TableColumn @bind-Field="@context.Department" />
    </TableColumns>
</Table>

@code {
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; } = "";
        public int Age { get; set; }
        public string Department { get; set; } = "";
    }

    private static readonly List<Employee> _data = new()
    {
        new Employee { Id = 1, Name = "Alice", Age = 30, Department = "Engineering" },
        new Employee { Id = 2, Name = "Bob",   Age = 25, Department = "Design" },
    };

    private Task<QueryData<Employee>> OnQueryAsync(QueryPageOptions options)
    {
        var items = _data.AsQueryable();
        if (!string.IsNullOrEmpty(options.SearchText))
            items = items.Where(e => e.Name.Contains(options.SearchText));
        return Task.FromResult(new QueryData<Employee>
        {
            Items = items.Skip((options.PageIndex - 1) * options.PageItems)
                         .Take(options.PageItems).ToList(),
            TotalCount = items.Count()
        });
    }

    private Task<bool> OnSaveAsync(Employee item, ItemChangedType type) =>
        Task.FromResult(true);

    private Task<bool> OnDeleteAsync(IEnumerable<Employee> items) =>
        Task.FromResult(true);
}
```

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

### Button Component with Async Loading

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Renders a Bootstrap-styled button with an optional async loading state and icon. Setting IsAsync="true" disables the button and shows a spinner during execution.

```razor
<Button Text="Save"
        Color="Color.Primary"
        Icon="fa-solid fa-save"
        IsAsync="true"
        OnClick="@HandleSaveAsync" />

<Button Text="Delete"
        Color="Color.Danger"
        IsDisabled="@_isDeleting"
        OnClick="@HandleDelete" />

@code {
    private bool _isDeleting = false;

    private async Task HandleSaveAsync(MouseEventArgs e)
    {
        // Button is automatically disabled with spinner during execution
        await Task.Delay(1500); // simulate async work
        Console.WriteLine("Saved!");
    }

    private void HandleDelete(MouseEventArgs e)
    {
        _isDeleting = true;
    }
}
```

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

### Add Namespace to _Imports.razor

Source: https://github.com/dotnetcore/bootstrapblazor/blob/main/src/BootstrapBlazor/readme.md

Include the BootstrapBlazor.Components namespace in your _Imports.razor file to use the components.

```razor
@using BootstrapBlazor.Components
```

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

### Collect Browser Client Info with WebClientService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

WebClientService gathers browser client information such as IP address, browser, OS, and device type. Inject the service and call GetClientInfo to retrieve the data. The results can be displayed in your component.

```razor
@inject WebClientService WebClientService

<p>IP: @_client?.Ip</p>
<p>Browser: @_client?.Browser</p>
<p>OS: @_client?.OS</p>
<p>City: @_client?.City</p>

@code {
    private ClientInfo? _client;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _client = await WebClientService.GetClientInfo();
            // ClientInfo properties: Id, Ip, City, Browser, OS, Device, Language, RequestUrl, UserAgent, Engine, UserName
            StateHasChanged();
        }
    }
}
```

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

### Copy and Paste with ClipboardService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Use ClipboardService to interact with the browser's clipboard. It supports copying text and reading text or other clipboard items. Ensure the service is injected into your component.

```razor
@inject ClipboardService ClipboardService

<Button Text="Copy"  OnClick="@CopyText" />
<Button Text="Paste" OnClick="@ReadText" />

@code {
    private string _output = "";

    private async Task CopyText(MouseEventArgs e)
    {
        await ClipboardService.Copy(
            "Hello from Bootstrap Blazor!",
            callback: async () => Console.WriteLine("Copied to clipboard")
        );
    }

    private async Task ReadText(MouseEventArgs e)
    {
        _output = await ClipboardService.GetText() ?? "(empty)";
        Console.WriteLine($"Clipboard text: {_output}");

        // Read all clipboard contents (text, images, etc.)
        var items = await ClipboardService.Get();
        foreach (var item in items)
            Console.WriteLine($"Type: {item.Type}");
    }
}
```

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

### Select Component with Data Binding and Callbacks

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

A dropdown component with support for data binding, static options via RenderFragment, dynamic item lists, editable mode, virtualization, and a callback when the selected item changes.

```razor
<Select TValue="string"
        @bind-Value="_selectedCity"
        Items="@_cities"
        IsUseDefaultItemWhenValueIsNull="true"
        OnSelectedItemChanged="@OnCityChanged" />

@code {
    private string _selectedCity = "";

    private List<SelectedItem> _cities = new()
    {
        new SelectedItem("ny",     "New York"),
        new SelectedItem("la",     "Los Angeles"),
        new SelectedItem("ch",     "Chicago") { Active = true },
    };

    private async Task OnCityChanged(SelectedItem item)
    {
        Console.WriteLine($"Selected: {item.Text} ({item.Value})");
        await Task.CompletedTask;
    }
}
```

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

### Perform AJAX Requests with AjaxService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

AjaxService enables JavaScript-side fetch/Ajax requests from Blazor without using HttpClient. It's useful for navigation-style POSTs or cross-origin calls. Inject the service and use InvokeAsync for general requests or Goto for navigation.

```razor
@inject AjaxService AjaxService

<Button Text="Submit Form" OnClick="@SubmitForm" />
<Button Text="Navigate"    OnClick="@Navigate" />

@code {
    private async Task SubmitForm(MouseEventArgs e)
    {
        var result = await AjaxService.InvokeAsync(new AjaxOption
        {
            Url    = "/api/orders",
            Method = "POST",
            Data   = new { ProductId = 42, Quantity = 3 },
        });

        if (result != null)
            Console.WriteLine(result.RootElement.GetRawText());
    }

    private async Task Navigate(MouseEventArgs e)
    {
        await AjaxService.Goto("/dashboard");
    }
}
```

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

### Configure Table and Editor Columns with AutoGenerateColumn

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Decorate model properties with [AutoGenerateColumn] to control rendering in Table<TItem> and EditorForm<TModel>. Options include order, visibility, sortability, read-only state, and width.

```csharp
public class Product
{
    [AutoGenerateColumn(Ignore = true)]
    public int InternalId { get; set; }

    [AutoGenerateColumn(Order = 1, Sortable = true, Filterable = true, Width = 200)]
    [Display(Name = "Product Name")]
    public string Name { get; set; } = "";

    [AutoGenerateColumn(Order = 2, Sortable = true, FormatString = "C2")]
    [Display(Name = "Price")]
    public decimal Price { get; set; }

    [AutoGenerateColumn(Order = 3, IsReadonlyWhenAdd = true, IsReadonlyWhenEdit = false)]
    [Display(Name = "SKU")]
    public string Sku { get; set; } = "";

    [AutoGenerateColumn(Order = 4, IsVisibleWhenAdd = false)]
    [Display(Name = "Created At")]
    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
}
```

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

### FullScreenService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

FullScreenService toggles browser fullscreen mode for the entire page or a specified element, using the browser Fullscreen API via JS interop.

```APIDOC
## FullScreenService

`FullScreenService` toggles browser fullscreen mode for the entire page or a specified element, using the browser Fullscreen API via JS interop.

```razor
@inject FullScreenService FullScreenService

<Button Text="Toggle Fullscreen" OnClick="@ToggleFullscreen" />

@code {
    private async Task ToggleFullscreen(MouseEventArgs e)
    {
        // Toggle page fullscreen (call again to exit)
        await FullScreenService.Toggle();

        // Or target a specific element by CSS selector
        await FullScreenService.Toggle(new FullScreenOption { Id = "my-chart-container" });
    }
}
```
```

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

### ToastService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

ToastService displays non-blocking notification toasts with category, title, content, auto-dismiss delay, and optional close callbacks. Inject it into any component.

```APIDOC
## ToastService

`ToastService` displays non-blocking notification toasts with category (Success, Information, Warning, Error), title, content, auto-dismiss delay, and optional close callbacks. Inject it into any component.

```razor
@inject ToastService ToastService

<Button Text="Show Toast" OnClick="@ShowToast" />

@code {
    private async Task ShowToast(MouseEventArgs e)
    {
        await ToastService.Show(new ToastOption
        {
            Category    = ToastCategory.Success,
            Title       = "Operation Complete",
            ChildContent = builder => builder.AddContent(0, "Record saved successfully."),
            Delay        = 3000,
            ShowClose    = true,
            OnCloseAsync = async () => Console.WriteLine("Toast closed"),
        });

        // Show an error toast
        await ToastService.Show(new ToastOption
        {
            Category = ToastCategory.Error,
            Title    = "Save Failed",
            ChildContent = builder => builder.AddContent(0, "Network error — please retry."),
        });
    }
}
```
```

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

### Subscribe to IDispatchService<NotificationMessage>

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Subscribe to a dispatch service to receive real-time updates. Ensure to unsubscribe when the component is disposed to prevent memory leaks.

```razor
@inject IDispatchService<NotificationMessage> Dispatcher
@implements IDisposable

<p>Latest: @_latest</p>

@code {
    private string _latest = "—";

    protected override void OnInitialized()
    {
        Dispatcher.Subscribe(OnMessageReceived);
    }

    private async Task OnMessageReceived(DispatchEntry<NotificationMessage> entry)
    {
        if (entry.Entry != null)
        {
            _latest = entry.Entry.Text;
            await InvokeAsync(StateHasChanged);
        }
    }

    public void Dispose() => Dispatcher.UnSubscribe(OnMessageReceived);
}
```

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

### Configure DateTimePicker Component

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Configure DateTimePicker for DateTime and DateOnly types. Supports view modes, range restrictions, and button/inline display. Ensure TValue is set correctly.

```razor
<DateTimePicker TValue="DateTime"
                @bind-Value="_selectedDate"
                ViewMode="DatePickerViewMode.DateTime"
                ShowIcon="true"
                IsButton="false"
                OnConfirm="@OnDateConfirmed" />

<DateTimePicker TValue="DateOnly"
                @bind-Value="_dateOnly"
                ViewMode="DatePickerViewMode.Date" />

@code {
    private DateTime _selectedDate = DateTime.Now;
    private DateOnly _dateOnly = DateOnly.FromDateTime(DateTime.Today);

    private void OnDateConfirmed()
    {
        Console.WriteLine($"Confirmed: {_selectedDate:yyyy-MM-dd HH:mm:ss}");
    }
}
```

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

### BootstrapInput Component with Clearable and Readonly

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

A generic input field supporting two-way binding, readonly mode, a clearable button, trimming, and auto-default-on-null behavior. It participates in Blazor's EditContext validation pipeline.

```razor
<BootstrapInput TValue="string"
                @bind-Value="_username"
                PlaceHolder="Enter username"
                IsClearable="true"
                OnClear="@OnClear" />

<BootstrapInput TValue="int"
                @bind-Value="_age"
                Readonly="@_readonlyMode"
                AutoSetDefaultWhenNull="true" />

@code {
    private string _username = "";
    private int _age = 0;
    private bool _readonlyMode = false;

    private async Task OnClear(string previousValue)
    {
        Console.WriteLine($"Cleared previous value: {previousValue}");
        await Task.CompletedTask;
    }
}
```

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

### Control Browser Fullscreen with FullScreenService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Toggle browser fullscreen mode for the entire page or a specific element using FullScreenService. It utilizes the browser Fullscreen API via JS interop.

```razor
@inject FullScreenService FullScreenService

<Button Text="Toggle Fullscreen" OnClick="@ToggleFullscreen" />

@code {
    private async Task ToggleFullscreen(MouseEventArgs e)
    {
        // Toggle page fullscreen (call again to exit)
        await FullScreenService.Toggle();

        // Or target a specific element by CSS selector
        await FullScreenService.Toggle(new FullScreenOption { Id = "my-chart-container" });
    }
}
```

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

### Dispatch a NotificationMessage

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Dispatch a message using IDispatchService<NotificationMessage>. This is typically done from a background service or another component to notify subscribers.

```csharp
// Sending from a background service or another component
public class NotificationMessage { public string Text { get; set; } = ""; }

// Inject IDispatchService<NotificationMessage> and call:
dispatchService.Dispatch(new DispatchEntry<NotificationMessage>
{
    Entry = new NotificationMessage { Text = "New order received!" }
});
```

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

### Display Notifications with ToastService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Inject ToastService to display non-blocking notification toasts. Configure category, title, content, auto-dismiss delay, and close callbacks.

```razor
@inject ToastService ToastService

<Button Text="Show Toast" OnClick="@ShowToast" />

@code {
    private async Task ShowToast(MouseEventArgs e)
    {
        await ToastService.Show(new ToastOption
        {
            Category    = ToastCategory.Success,
            Title       = "Operation Complete",
            ChildContent = builder => builder.AddContent(0, "Record saved successfully."),
            Delay        = 3000,
            ShowClose    = true,
            OnCloseAsync = async () => Console.WriteLine("Toast closed"),
        });

        // Show an error toast
        await ToastService.Show(new ToastOption
        {
            Category = ToastCategory.Error,
            Title    = "Save Failed",
            ChildContent = builder => builder.AddContent(0, "Network error — please retry."),
        });
    }
}
```

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

### Set Browser Tab Title with TitleService

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

TitleService allows dynamic setting of the browser tab/window title from any Blazor component or service. Inject the service and call SetTitle with the desired title string.

```razor
@inject TitleService TitleService
@inject NavigationManager Nav

@code {
    protected override async Task OnInitializedAsync()
    {
        await TitleService.SetTitle("Dashboard — My App");
    }
}
```

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

### Create Auto-Generated EditorForm

Source: https://context7.com/dotnetcore/bootstrapblazor/llms.txt

Generate form fields automatically from model properties using EditorForm. Supports layout, grouping, validation, and custom field templates. Use within a ValidateForm for validation.

```razor
<ValidateForm Model="@_person" OnValidSubmit="@HandleSubmit">
    <EditorForm TModel="Person"
                ItemsPerRow="2"
                RowType="RowType.Normal"
                AutoGenerateAllItem="true">
        <FieldItems>
            <EditorItem Field="@context.Name" Readonly="false" />
            <EditorItem Field="@context.BirthDate" />
            <EditorItem Field="@context.Role"
                        Items="@_roles"
                        ComponentType="typeof(Select<string>)" />
        </FieldItems>
        <Buttons>
            <Button ButtonType="ButtonType.Submit" Text="Save" Color="Color.Primary" />
        </Buttons>
    </EditorForm>
</ValidateForm>

@code {
    public class Person
    {
        [Required]
        [Display(Name = "Full Name")]
        public string Name { get; set; } = "";

        [Display(Name = "Birth Date")]
        public DateTime BirthDate { get; set; } = DateTime.Today;

        [Display(Name = "Role")]
        public string Role { get; set; } = "user";
    }

    private Person _person = new();

    private List<SelectedItem> _roles = new()
    {
        new SelectedItem("admin", "Administrator"),
        new SelectedItem("user",  "User"),
    };

    private void HandleSubmit(EditContext ctx)
    {
        Console.WriteLine($"Saved: {_person.Name}");
    }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.