Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Dialog component

Human-computer interaction by calling the `Show` method pop-up window by injecting the service

Component usage introduction：

1. inject service DialogService

@inject DialogService DialogService

[Inject]
[NotNull]
private DialogService? DialogService { get; set; }

2. call its instance api

var op = new DialogOption()
{
    Title = Data query window,
    ShowFooter = false,
    BodyContext = DataPrimaryId
};
op.Component = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
{
    [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
});
await DialogService.Show(op);

3. CascadingParameter

[CascadingParameter]
private Func<Task>? OnCloseAsync { get; set; }

private async Task OnClick()
{
    if (OnCloseAsync != null)
    {
        await OnCloseAsync();
    }
}

4. DialogCloseButton

<DialogCloseButton />

Basic usage

Set the basic properties of the modal box by setting the DialogOption property

Demo

by setting DialogOption IsKeyboard parameter, whether the pop-up window supports ESC, please click the back button to set and then click the pop-up window button to test the effect

@inject IStringLocalizer<DialogKeyboard> Localizer

<Button OnClick="@OnClick">@Localizer["KeyboardOpenDialogButton"]</Button>
<Button OnClick="@OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3" />

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private bool IsKeyboard { get; set; }

    private Task OnClick() => DialogService.Show(new DialogOption()
    {
        IsKeyboard = IsKeyboard,
        Title = "I am the popup created by the service",
        BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.ChildContent)] = new RenderFragment(builder => builder.AddContent(0, "Button"))
        }).Render()
    });

    private void OnClickKeyboard()
    {
        IsKeyboard = !IsKeyboard;
    }
}

Custom title bar

Customize the title bar of the modal box by setting the HeaderTemplate property

Demo

@inject IStringLocalizer<DialogCustomerHeader> Localizer

<Button OnClick="@OnCustomerHeaderClick" Text="@Localizer["CustomerHeaderOpenDialogButton"]" />

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private DialogBodyFoo? BodyFooComponent { get; set; }

    private async Task TriggerUpdateBodyAsync(string val)
    {
        if (BodyFooComponent != null)
        {
            await BodyFooComponent.UpdateAsync(val);
        }
    }

    private Task OnCustomerHeaderClick() => DialogService.Show(new DialogOption()
    {
        HeaderTemplate = BootstrapDynamicComponent.CreateComponent<DialogHeaderFoo>(new Dictionary<string, object?>
        {
            [nameof(DialogHeaderFoo.OnValueChanged)] = new Func<string, Task>(val => TriggerUpdateBodyAsync(val))
        }).Render(),
        BodyTemplate = builder =>
        {
            builder.OpenComponent<DialogBodyFoo>(0);
            builder.AddComponentReferenceCapture(1, obj => BodyFooComponent = (DialogBodyFoo)obj);
            builder.CloseComponent();
        },
    });
}

Header Toolbar Template

Set HeaderToolbarTemplate custom the buttons on Header

Demo

@inject IStringLocalizer<DialogHeaderToolbarTemplate> Localizer

<Button OnClick="@OnCustomerHeaderToolbarClick" Text="@Localizer["HeaderToolbarTemplateButtonText"]" />

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    [Inject]
    [NotNull]
    private ToastService? ToastService { get; set; }

    private Task OnCustomerHeaderToolbarClick() => DialogService.Show(new DialogOption()
    {
        Title = Localizer["HeaderToolbarTemplateDialogTitle"],
        HeaderToolbarTemplate = builder =>
        {
            builder.OpenComponent<Button>(0);
            builder.AddAttribute(1, nameof(Button.Icon), "fa-solid fa-print");
            builder.AddAttribute(1, nameof(Button.OnClickWithoutRender), () => ToastService.Success(Localizer["HeaderToolbarTemplateDialogTitle"], Localizer["HeaderToolbarTemplateToastContent"]));
            builder.CloseComponent();
        }
    });
}

Pop out complex components

Pop up a custom component by calling Show<Counter>()

Demo

In this example, the pop-up dialog box contains a built-in Counter component of a sample website

@inject IStringLocalizer<DialogComponent> Localizer

<Button @onclick="@OnClickCounter">@Localizer["ComponentOpenDialogButton"]</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private Task OnClickCounter() => DialogService.Show(new DialogOption()
    {
        Title = "Built-in Counter component",
        Component = BootstrapDynamicComponent.CreateComponent<Counter>()
    });
}

Pop-up window

By setting the BodyContext attribute value, parameters can be passed to the components in the pop-up window

Demo

In this example, when the button is clicked, the value of BodyContext is set to I am a parameter, and the content of the pop-up window is the custom component DemoComponent, which is cascaded in the component. parameter gets its value

@inject IStringLocalizer<DialogBodyContext> Localizer

<Button @onclick="@OnClickParameter">@Localizer["BodyContextOpenDialogButton"]</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private Task OnClickParameter() => DialogService.Show(new DialogOption()
    {
        Title = "Built-in Counter component",
        BodyContext = "I'm a passer",
        BodyTemplate = builder =>
        {
            var index = 0;
            builder.OpenComponent<DemoComponent>(index++);
            builder.CloseComponent();
        }
    });
}

Practical application

In this example, by passing a primary key, the components in the pop-up window perform data query through this primary key, and display the results in the pop-up window

Demo

Primary key parameter

@inject IStringLocalizer<DialogApply> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Select @bind-Value="@DataPrimaryId" DisplayText="@Localizer["ApplyDisplayText"]" ShowLabel="true">
            <Options>
                <SelectOption Text="1" Value="1"/>
                <SelectOption Text="2" Value="2"/>
                <SelectOption Text="3" Value="3"/>
                <SelectOption Text="4" Value="4"/>
                <SelectOption Text="5" Value="5"/>
                <SelectOption Text="6" Value="6"/>
                <SelectOption Text="7" Value="7"/>
                <SelectOption Text="8" Value="8"/>
                <SelectOption Text="9" Value="9"/>
                <SelectOption Text="10" Value="10"/>
            </Options>
        </Select>
    </div>
    <div class="col-12 col-sm-6 align-self-end">
        <Button OnClick="@OnClickShowDataById">@Localizer["ApplyOpenDialogButton"]</Button>
    </div>
</div>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private int DataPrimaryId { get; set; } = 1;

    private async Task OnClickShowDataById()
    {
        var op = new DialogOption()
        {
            Title = "Data query window",
            ShowFooter = false,
            BodyContext = DataPrimaryId
        };
        op.Component = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>();

        await DialogService.Show(op);
    }
}

Code to close the popup

This example explains how to open and close a popup window through code

Demo

Use popup parameters DialogOption Instance, in the instance after the pop-up window pops up Dialog The property value is the handle of the current popup window. By calling its Toggle/Close method to close the popup

@inject IStringLocalizer<DialogCloseDialogByCode> Localizer

<Button OnClick="@Show">Dialog</Button>
<Button OnClick="@CloseButtonShow">CloseButton</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private async Task Show()
    {
        var option = new DialogOption()
        {
            Title = "Close the popup with code",
        };
        option.Component = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.Text)] = "Click to close the popup",
            [nameof(Button.OnClick)] = EventCallback.Factory.Create<MouseEventArgs>(this, option.CloseDialogAsync)
        });
        await DialogService.Show(option);
    }

    private async Task CloseButtonShow()
    {
        var option = new DialogOption()
        {
            Title = "Close the popup with DialogCloseButton",
            Component = BootstrapDynamicComponent.CreateComponent<DialogCloseButton>()
        };
        await DialogService.Show(option);
    }
}

Disable close button in Header

This example explains how to open and close a popup window through code

Demo

Setting parameters ShowHeaderCloseButton Ban pop-ups Header Shows the Close button on the right

<Button @onclick="@ShowNoHeaderCloseButtonDialog">Dialog</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private async Task ShowNoHeaderCloseButtonDialog()
    {
        var option = new DialogOption()
        {
            Title = "Header no close button",
            ShowHeaderCloseButton = false
        };
        option.Component = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.Text)] = "Click to close the popup",
            [nameof(Button.OnClick)] = EventCallback.Factory.Create<MouseEventArgs>(this, option.CloseDialogAsync)
        });

        await DialogService.Show(option);
    }
}

Multi-level popup

Click the button inside the popup to continue the popup dialog

Demo

Features

Click the button to pop up a dialog
Switch the third tab of the Tab component in the pop-up window role management
Click the popup in the tab to continue the popup dialog
Keep state of previously opened dialogs after closing the current dialog

At present, multi-level pop-up windows have been implemented. Each ModalDialog can independently set the IsBackdrop IsKeyboard parameters. This fixes the problem of pressing ESC in the previous version to remove all pop-up windows

@inject IStringLocalizer<DialogMultipleDialog> Localizer

<Button OnClick="@ShowDialogLoop">@Localizer["MultipleDialogButton"]</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private async Task ShowDialogLoop()
    {
        await DialogService.Show(new DialogOption()
        {
            Title = $"Multiple Pop-up",
            IsDraggable= true,
            IsKeyboard = true,
            IsBackdrop = true,
            Component = BootstrapDynamicComponent.CreateComponent<DialogDemo>()
        });
    }
}

Modal dialog

Pop up a dialog box in thread blocking mode through the ShowModal method

Demo

Features

Click the button to pop up a modal popup
Change the value in the modal pop-up window when the confirm button is clicked update
Change the value in the modal pop-up window and click the Cancel or Close button when the value is not updated
When the modal pop-up window is clicked again, the value remains the same

@inject IStringLocalizer<DialogModalDialog> Localizer

<Button OnClick="@OnResultDialogClick">@Localizer["ModalDialogButton"]</Button>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    [NotNull]
    private BlockLogger? Trace { get; set; }

    private int DemoValue1 { get; set; } = 1;

    private async Task OnResultDialogClick()
    {
        var result = await DialogService.ShowModal<ResultDialogDemo>(new ResultDialogOption()
        {
            Title = "Modal popup with return value",
            ComponentParamters = new Dictionary<string, object>
            {
                [nameof(ResultDialogDemo.Value)] = DemoValue1,
                [nameof(ResultDialogDemo.ValueChanged)] = EventCallback.Factory.Create<int>(this, v => DemoValue1 = v)
            }
        });

        Trace.Log($"The return value of the popup window is: {result} The return value of the component is: {DemoValue1}");
    }
}

Edit dialog

Pop up the save dialog through the ShowEditDialog method

Demo

Features

Click the button to pop up the edit popup
Set the pop-up window through the EditDialogOption parameter
The design starting point automatically generates a form window with client-side validation by giving a Model or Items

@inject IStringLocalizer<DialogEditDialog> Localizer

<Button OnClick="@OnEditDialogClick">@Localizer["EditDialogButton"]</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private async Task OnEditDialogClick()
    {
        var option = new EditDialogOption<Foo>()
        {
            Title = "Edit popup",
            Model = new Foo(),
            RowType = RowType.Inline,
            ShowLoading = true,
            ItemsPerRow = 2,
            ItemChangedType = ItemChangedType.Update,
            OnEditAsync = async context =>
            {
                await Task.Delay(2000);
                return false;
            }
        };
        await DialogService.ShowEditDialog(option);
    }
}

Search dialog

Pop up the save dialog through the ShowSearchDialog method

Demo

Features

Click the button to pop up a search popup
Set the pop-up window through the SearchDialogOption parameter
The design starting point automatically generates a search window by giving a Model or Items

@inject IStringLocalizer<DialogSearchDialog> Localizer

<Button OnClick="@OnSearchDialogClick">@Localizer["SearchDialogButton"]</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private async Task OnSearchDialogClick()
    {
        var option = new SearchDialogOption<Foo>()
        {
            Title = "Search popup",
            Model = new Foo(),
            RowType = RowType.Inline,
            ItemsPerRow = 2,
        };
        await DialogService.ShowSearchDialog(option);
    }
}

Save dialog

Pop up the save dialog through the ShowSaveDialog method

Demo

Features

Click the button to pop up the save popup
The design starting point automatically generates a save window by giving a TComponent, and performs data processing in the save callback method by setting saveCallback, which is required by TComponent generic components Parameters can be passed through parameters

@inject IStringLocalizer<DialogSaveDialog> Localizer

<Button OnClick="@OnSaveDialogClick">@Localizer["SaveDialogButton"]</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    private async Task OnSaveDialogClick()
    {
        var foo = Foo.Generate(LocalizerFoo);
        await DialogService.ShowSaveDialog<DialogSaveDetail>("Save", () =>
        {
            // 此处可以访问 foo 实例进行入库操作等
            return Task.FromResult(true);
        }, parameters =>
        {
            parameters.Add(nameof(DialogSaveDetail.Value), foo);
        });
    }
}

Dialog size

Very flexible form size control can be achieved by setting the Size FullScreenSize parameter combination

Demo

@inject IStringLocalizer<DialogSize> Localizer

<Button OnClick="@OnSizeDialogClick">@((MarkupString)Localizer["SizeButton"].Value)</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private Task OnSizeDialogClick() => DialogService.Show(new DialogOption()
    {
        Title = "full screen window",
        FullScreenSize = FullScreenSize.ExtraLarge,
        BodyTemplate = builder => builder.AddContent(0, "Full screen when screen is less than 1200px")
    });
}

Print button

Show a print preview button on the Header by setting ShowPrintButton

Demo

by setting PrintButtonText change the Print Preview button text

@inject IStringLocalizer<DialogPrintDialog> Localizer

<Button OnClick="@OnPrintDialogClick">@Localizer["PrintDialogButton"]</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private int DataPrimaryId { get; set; } = 1;

    private async Task OnPrintDialogClick()
    {
        var op = new DialogOption()
        {
            Title = "Data query window",
            ShowPrintButton = true,
            ShowPrintButtonInHeader = true,
            ShowFooter = false,
            BodyContext = DataPrimaryId
        };
        op.Component = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>();

        await DialogService.Show(op);
    }
}

Full screen popup

Show a window maximize button on the Header by setting ShowMaximizeButton

Demo

@inject IStringLocalizer<DialogShowMaximizeButton> Localizer

<Button OnClick="@OnMaximizeDialogClick">@Localizer["ShowMaximizeButton"]</Button>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private async Task OnMaximizeDialogClick()
    {
        await DialogService.Show(new DialogOption()
        {
            Title = $"Controllable maximized popup",
            ShowMaximizeButton = true,
            BodyTemplate = builder =>
            {
                builder.AddContent(0, "Click the maximize button in the Header to pop up the window to full screen");
            }
        });
    }
}

exception catch

Through BootstrapBlazorRoot built-in ErrorLogger global exception capture for errors in the pop-up window

Demo

@inject IStringLocalizer<DialogErrorLogger> Localizer

<Button OnClick="@OnErrorDialog" Text="@Localizer["ErrorLoggerButton"]" Icon="fa-solid fa-bug" />

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private Task OnErrorDialog() => DialogService.Show(new DialogOption()
    {
        Title = "Click the button to report the error test",
        Component = BootstrapDynamicComponent.CreateComponent<ErrorCounter>()
    });
}

Practical drill

Simulate a mail application, select the recipient in the pop-up window and fill in the recipient box below.

Demo

Features

Click the button to pop up a modal popup
Pass 10 to the pop-up window by cascading parameters BodyContext to initialize data
Select the row data in the Table component and update the SelectedRows data through two-way binding
Click the Check button to update the Emails data via two-way binding
Emails value not updated when Cancel or Close button is clicked
When clicking the pop-up modal pop-up window again, the selected state of the inner row of the component remains the same
Prohibit closing the popup when no user is selected in the popup

recipient：

@inject IStringLocalizer<DialogEmail> Localizer

<div class="input-group">
    <BootstrapInput PlaceHolder="@Localizer["EmailInput"]" Value="@InputValue" />
    <Button Icon="fa-regular fa-address-card" OnClick="@OnEmailButtonClick" />
</div>

@code {
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    private IEnumerable<string> Emails { get; set; } = Array.Empty<string>();

    private string? InputValue { get; set; }

    private async Task OnEmailButtonClick()
    {
        var result = await DialogService.ShowModal<ResultDialogDemo2>(new ResultDialogOption()
        {
            Title = Localizer["EmailDialogTitle"],
            BodyContext = new ResultDialogDemo2.FooContext() { Count = 10, Emails = InputValue },
            ButtonYesText = Localizer["EmailDialogButtonYes"],
            ButtonYesIcon = "fa-solid fa-magnifying-glass",
            ComponentParamters = new Dictionary<string, object>
            {
                [nameof(ResultDialogDemo2.Emails)] = Emails,
                [nameof(ResultDialogDemo2.EmailsChanged)] = EventCallback.Factory.Create<IEnumerable<string>>(this, v => Emails = v)
            }
        });

        if (result == DialogResult.Yes)
        {
            InputValue = string.Join(";", Emails);
        }
    }
}

DialogOption property

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Dialog component

Human-computer interaction by calling the Show method pop-up window by injecting the service

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

DialogOption property

Bootstrap Blazor Component library updated to 7.4.4-beta01

Human-computer interaction by calling the `Show` method pop-up window by injecting the service