Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

SearchDialog search popup

Automatically render search popups by binding the data model

SearchDialog component is Dialog An extension of the component, suitable for setting search criteria in the data popup.

Tips

Inject the service by calling DialogService of ShowSearchDialog The method directly pops up the search criteria pop-up window, which greatly reduces the amount of code. SearchDialogOption Configuration class inheritance DialogOption , for more parameter settings, please click [portal]

Basic usage

By binding the TModel data model, the search form for each field of the model is automatically generated

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.SearchDialogs> Localizer
@inject DialogService DialogService

<Button Text="@Localizer["SearchDialogsNormalButtonText"]" OnClickWithoutRender="@ShowDialog" />

<BlockLogger @ref="Trace" class="mt-3" />

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

    private async Task ShowDialog()
    {
        var option = new SearchDialogOption<Foo>()
        {
            Title = "search popup",
            Model = new Foo(),
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            OnCloseAsync = () =>
            {
                Trace.Log("Close button is clicked");
                return Task.CompletedTask;
            },
            OnResetSearchClick = () =>
            {
                Trace.Log("Reset button is clicked");
                return Task.CompletedTask;
            },
            OnSearchClick = () =>
            {
                Trace.Log("Search button is clicked");
                return Task.CompletedTask;
            }
        };

        await DialogService.ShowSearchDialog(option);
    }
}

Customize the criteria fields displayed in the search popup

Explicitly set the displayed search field by setting the Columns parameter

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.SearchDialogs> Localizer
@inject DialogService DialogService

<Button Text="@Localizer["SearchDialogsFieldButtonText"]" OnClickWithoutRender="@ShowColumnsDialog" />

@code {
    private async Task ShowColumnsDialog()
    {
        var model = new Foo();
        var option = new SearchDialogOption<Foo>()
        {
            Title = "Search popup",
            Model = model,
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
        };
        await DialogService.ShowSearchDialog(option);
    }
}

Set the layout in the search popup

By setting the RowType parameter to explicitly set the layout of the components in the pop-up window, the default is the upper and lower layout, and the value can be set to inline horizontal layout

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.SearchDialogs> Localizer
@inject DialogService DialogService

<Button Text="@Localizer["SearchDialogsLayoutButtonText1"]" OnClickWithoutRender="@ShowInlineDialog" />
<Button Text="@Localizer["SearchDialogsLayoutButtonText2"]" OnClickWithoutRender="@ShowInlineAlignDialog" />

@code {
    private async Task ShowInlineDialog()
    {
        var model = new Foo();
        var option = new SearchDialogOption<Foo>()
        {
            Title = "Search popup",
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            Model = model,
            Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
        };
        await DialogService.ShowSearchDialog(option);
    }

    private async Task ShowInlineAlignDialog()
    {
        var model = new Foo();
        var option = new SearchDialogOption<Foo>()
        {
            Title = "Search popup",
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            LabelAlign = Alignment.Right,
            Model = model,
            Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
        };
        await DialogService.ShowSearchDialog(option);
    }
}

SearchDialogOption property

B station related video link

[portal]

交流群

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

SearchDialog search popup

Automatically render search popups by binding the data model

Tips

Demo

Demo

Demo

SearchDialogOption property

Bootstrap Blazor Component library updated to 7.4.5-beta01