Blazor Bootstrap: Modal Component Examples

Modal Usage:

<Button Color="ButtonColor.Primary" @onclick="(async () => { await ShowModalAsync(); })">Show Modal</Button>

<Modal @ref="modal"
       OnShowing="OnModalShowingAsync"
       OnShown="OnModalShownAsync"
       OnHiding="OnModalHidingAsync"
       OnHidden="OnModalHiddenAsync"
       OnHidePrevented="OnModalHidePreventedAsync">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @onclick="(async () => { await HideModalAsync(); })">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>

</Modal>

@code {

    private Modal modal;

    private async Task ShowModalAsync()
    {
        await modal?.ShowAsync();
    }

    private async Task HideModalAsync()
    {
        await modal?.HideAsync();
    }

    private async Task OnModalShowingAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Showing"); });
    }

    private async Task OnModalShownAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Show"); });
    }

    private async Task OnModalHidingAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Hiding"); });
    }

    private async Task OnModalHiddenAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Hide"); });
    }

    private async Task OnModalHidePreventedAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Hide Prevented"); });
    }
}

Blazor Bootstrap Links:

1. Blazor Bootstrap: Quick Start
2. Blazor Bootstrap: Alert Component Examples
3. Blazor Bootstrap: Buttons Examples
4. Blazor Bootstrap: Icons Component Examples
5. Blazor Bootstrap: Modal Component Examples
6. Blazor Bootstrap: Offcanvas Component Example
7. Blazor Bootstrap: Toasts Component Examples
8. Blazor Bootstrap: Tooltip Component Examples