logoEnterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage

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);

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

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

Demo

Set HeaderToolbarTemplate custom the buttons on Header

Demo

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

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

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

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

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

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

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

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

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

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

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

Demo

Show a print preview button on the Header by setting ShowPrintButton

Demo
by setting PrintButtonText change the Print Preview button text

Show a window maximize button on the Header by setting ShowMaximizeButton

Demo

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

Demo

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

DialogOption property

Loading...
@page "/dialogs"

<h3>Dialog component</h3>
<h4>Human-computer interaction by calling the <code>Show</code> method pop-up window by injecting the service</h4>

<p>Component usage introduction:</p>

<p class="code-label">1. inject service <code>DialogService</code></p>
<Pre>@inject DialogService DialogService</Pre>
<Pre>[Inject]
[NotNull]
private DialogService? DialogService { get; set; }
</Pre>
<p class="code-label">2. call its instance <code>api</code></p>
<Pre>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);</Pre>

<DemoBlock Title="Basic usage" Introduction="Set the basic properties of the modal box by setting the <code>DialogOption</code> property" Name="Keyboard">
    <div>
        <p>by setting <code>DialogOption</code> <code>IsKeyboard</code> parameter, whether the pop-up window supports <kbd>ESC</kbd>, please click the back button to set and then click the <b>pop-up window</b> button to test the effect</p>
        <Button OnClick="@OnClick">Click to open Dialog</Button>
        <Button OnClick="@OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3" />
    </div>
</DemoBlock>

<DemoBlock Title="Custom title bar" Introduction="Customize the title bar of the modal box by setting the <code>HeaderTemplate</code> property" Name="CustomerHeader">
    <div>
        <Button OnClick="@OnCustomerHeaderClick" Text="Pop-ups" />
    </div>
</DemoBlock>

<DemoBlock Title="Header Toolbar Template" Introduction="Set <code>HeaderToolbarTemplate</code> custom the buttons on <code>Header</code>" Name="HeaderToolbarTemplate">
    <div>
        <Button OnClick="@OnCustomerHeaderToolbarClick" Text="Print" />
    </div>
</DemoBlock>

<DemoBlock Title="Pop out complex components" Introduction="Pop up a custom component by calling <code>Show<Counter>()</code>" Name="Component">
    <div class="mb-2">In this example, the pop-up dialog box contains a built-in <code>Counter</code> component of a sample website</div>
    <Button @onclick="@OnClickCounter">Click to open Dialog</Button>
</DemoBlock>

<DemoBlock Title="Pop-up window" Introduction="By setting the <code>BodyContext</code> attribute value, parameters can be passed to the components in the pop-up window" Name="BodyContext">
    <p>In this example, when the button is clicked, the value of <code>BodyContext</code> is set to <code>I am a parameter</code>, and the content of the pop-up window is the custom component <code>DemoComponent</code>, which is cascaded in the component. parameter gets its value</p>
    <Button @onclick="@OnClickParameter">Dialog parameter passing example</Button>
</DemoBlock>

<DemoBlock Title="Practical application" Introduction="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" Name="Apply">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select @bind-Value="@DataPrimaryId" DisplayText="Primary key parameter" ShowLabel="true">
                <Options>
                    <SelectOption Text="1" Value="1"></SelectOption>
                    <SelectOption Text="2" Value="2"></SelectOption>
                    <SelectOption Text="3" Value="3"></SelectOption>
                    <SelectOption Text="4" Value="4"></SelectOption>
                    <SelectOption Text="5" Value="5"></SelectOption>
                    <SelectOption Text="6" Value="6"></SelectOption>
                    <SelectOption Text="7" Value="7"></SelectOption>
                    <SelectOption Text="8" Value="8"></SelectOption>
                    <SelectOption Text="9" Value="9"></SelectOption>
                    <SelectOption Text="10" Value="10"></SelectOption>
                </Options>
            </Select>
        </div>
        <div class="col-12 col-sm-6 align-self-end">
            <Button @onclick="@OnClickShowDataById">Pop-ups</Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Code to close the popup" Introduction="This example explains how to open and close a popup window through code" Name="CloseDialogByCode">
    <div class="mb-2">Use popup parameters  <code>DialogOption</code> Instance, in the instance after the pop-up window pops up <code>Dialog</code> The property value is the handle of the current popup window. By calling its <code>Toggle/Close</code> method to close the popup</div>
    <Button @onclick="@Show">Dialog</Button>
</DemoBlock>

<DemoBlock Title="Disable close button in Header" Introduction="This example explains how to open and close a popup window through code" Name="DisableHeaderCloseButton">
    <p>Setting parameters <code>ShowHeaderCloseButton</code> Ban pop-ups <code>Header</code> Shows the <b>Close</b> button on the right</p>
    <Button @onclick="@ShowNoHeaderCloseButtonDialog">Dialog</Button>
</DemoBlock>

<DemoBlock Title="Multi-level popup" Introduction="Click the button inside the popup to continue the popup dialog" Name="MultipleDialog">
    <div class="mb-2">Features</div>
    <ul class="ul-demo mb-2">
        <li>Click the button to pop up a dialog</li>
        <li>Switch the third tab of the <code>Tab</code> component in the pop-up window <b>role management</b></li>
        <li>Click the popup in the tab to continue the popup dialog</li>
        <li><b>Keep state</b> of previously opened dialogs after closing the current dialog</li>
    </ul>
    <div class="mb-2">At present, multi-level pop-up windows have been implemented. Each <code>ModalDialog</code> can independently set the <code>IsBackdrop</code> <code>IsKeyboard</code> parameters. This fixes the problem of pressing <kbd>ESC</kbd> in the previous version to remove all pop-up windows</div>

    <Button OnClick="@ShowDialogLoop">Pop-ups</Button>
</DemoBlock>

<DemoBlock Title="Modal dialog" Introduction="Pop up a dialog box in thread blocking mode through the <code>ShowModal</code> method" Name="ModalDialog">
    <div class="mb-2">Features</div>
    <ul class="ul-demo mb-2">
        <li>Click the button to pop up a modal popup</li>
        <li>Change the value in the modal pop-up window when the <code>confirm</code> button is clicked <b>update</b></li>
        <li>Change the value in the modal pop-up window and click the <code>Cancel</code> or <code>Close</code> button when the value is <b>not updated</b></li>
        <li>When the modal pop-up window is clicked again, the value remains the same</li>
    </ul>
    <Button OnClick="@OnResultDialogClick">Click to open Dialog</Button>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Edit dialog" Introduction="Pop up the save dialog through the <code>ShowEditDialog</code> method" Name="EditDialog">
    <div class="mb-2">Features</div>
    <ul class="ul-demo mb-2">
        <li>Click the button to pop up the edit popup</li>
        <li>Set the pop-up window through the <code>EditDialogOption</code> parameter</li>
        <li>The design starting point automatically generates a form window with client-side validation by giving a <code>Model</code> or <code>Items</code></li>
    </ul>
    <Button OnClick="@OnEditDialogClick">Edit popup</Button>
</DemoBlock>

<DemoBlock Title="Search dialog" Introduction="Pop up the save dialog through the <code>ShowSearchDialog</code> method" Name="SearchDialog">
    <div class="mb-2">Features</div>
    <ul class="ul-demo mb-2">
        <li>Click the button to pop up a search popup</li>
        <li>Set the pop-up window through the <code>SearchDialogOption</code> parameter</li>
        <li>The design starting point automatically generates a search window by giving a <code>Model</code> or <code>Items</code></li>
    </ul>
    <Button OnClick="@OnSearchDialogClick">Search popup</Button>
</DemoBlock>

<DemoBlock Title="Save dialog" Introduction="Pop up the save dialog through the <code>ShowSaveDialog</code> method" Name="SaveDialog">
    <div class="mb-2">Features</div>
    <ul class="ul-demo mb-2">
        <li>Click the button to pop up the save popup</li>
        <li>The design starting point automatically generates a save window by giving a <code>TComponent</code>, and performs data processing in the save callback method by setting <code>saveCallback</code>, which is required by <code>TComponent</code> generic components Parameters can be passed through <code>parameters</code></li>
    </ul>
    <Button OnClick="@OnSaveDialogClick">Save popup</Button>
</DemoBlock>

<DemoBlock Title="Dialog size" Introduction="Very flexible form size control can be achieved by setting the <code>Size</code> <code>FullScreenSize</code> parameter combination" Name="Size">
    <Button OnClick="@OnSizeDialogClick">Fullscreen popup (< 1200px)</Button>
</DemoBlock>

<DemoBlock Title="Print button" Introduction="Show a print preview button on the <code>Header</code> by setting <code>ShowPrintButton</code>" Name="PrintDialog">
        <div class="mb-2">by setting <code>PrintButtonText</code> change the <b>Print Preview</b> button text</div>
    <Button OnClick="@OnPrintDialogClick">Click to open Dialog</Button>
</DemoBlock>

<DemoBlock Title="Full screen popup" Introduction="Show a window maximize button on the <code>Header</code> by setting <code>ShowMaximizeButton</code>" Name="PrintDialog">
    <Button OnClick="@OnMaximizeDialogClick">Click to open Dialog</Button>
</DemoBlock>

<DemoBlock Title="exception catch" Introduction="Through <code>BootstrapBlazorRoot</code> built-in <code>ErrorLogger</code> global exception capture for errors in the pop-up window" Name="ErrorLogger">
    <Button OnClick="@OnErrorDialog" Text="global exception test" Icon="fa-solid fa-bug"></Button>
</DemoBlock>

<DemoBlock Title="Practical drill" Introduction="Simulate a mail application, select the recipient in the pop-up window and fill in the recipient box below." Name="Email">
    <div class="mb-2">Features</div>
    <ul class="ul-demo mb-2">
        <li>Click the button to pop up a modal popup</li>
        <li>Pass <b>10</b> to the pop-up window by cascading parameters <code>BodyContext</code> to initialize data</li>
        <li>Select the row data in the <code>Table</code> component and <b>update</b> the <code>SelectedRows</code> data through two-way binding</li>
        <li>Click the <b>Check</b> button to <b>update</b> the <code>Emails</code> data via two-way binding</li>
        <li><code>Emails</code> value <b>not updated</b> when <code>Cancel</code> or <code>Close</code> button is clicked</li>
        <li>When clicking the pop-up modal pop-up window again, the selected state of the inner row of the component remains the same</li>
        <li>Prohibit closing the popup when no user is selected in the popup</li>
    </ul>
    <label class="form-label">recipient:</label>
    <div class="input-group">
        <BootstrapInput PlaceHolder="please enter ..." Value="@InputValue"></BootstrapInput>
        <Button Icon="fa-regular fa-address-card" OnClick="@OnEmailButtonClick"></Button>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="DialogOption property" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using Microsoft.AspNetCore.Components.Web;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 弹窗组件示例代码
/// </summary>
public sealed partial class Dialogs
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// 获得 弹窗注入服务
    /// </summary>
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    /// <summary>
    /// 获得 Toast注入服务
    /// </summary>
    [Inject]
    [NotNull]
    private ToastService? ToastService { get; set; }

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

    [Inject]
    [NotNull]
    private IStringLocalizer<Dialogs>? Localizer { get; set; }

    private bool IsKeyboard { get; set; }

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

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

    private DialogBodyFoo? BodyFooComponent { get; set; }

    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();
        },
    });

    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();
        }
    });

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    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 async Task Show()
    {
        var option = new DialogOption()
        {
            Title = "Close the popup with code",
        };
        option.BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.Text)] = "Click to close the popup",
            [nameof(Button.OnClick)] = EventCallback.Factory.Create<MouseEventArgs>(this, async () => await option.Dialog.Close())
        }).Render();
        await DialogService.Show(option);
    }

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

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

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

    private async Task OnShownCallbackDialog()
    {
        var option = new DialogOption()
        {
            Title = "点击按钮报错测试"
        };
        option.Component = BootstrapDynamicComponent.CreateComponent<ShownCallbackDummy>(new Dictionary<string, object?>()
        {
            // ShownTodo 方法时组件 ShownCallbackDummy 已经渲染完毕后组件内部调用
            // 此回调中给 Option 实例的 ShownCallbackAsync 回调委托赋值
            // Modal 组件 ShownCallbackAsync 触发后调用 Option 实例的 ShownCallbackAsync
            [nameof(ShownCallbackDummy.ShownTodo)] = new Action<Func<Task>>(cb =>
            {
                option.OnShownAsync = async () =>
                {
                    await cb();
                };
            })
        });
        await DialogService.Show(option);
    }

    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();
        }
    });

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

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

        await DialogService.Show(op);
    }

    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}");
    }

    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")
    });

    private async Task OnPrintDialogClick()
    {
        var op = new DialogOption()
        {
            Title = "Data query window",
            ShowPrintButton = true,
            ShowPrintButtonInHeader = true,
            ShowFooter = false,
            BodyContext = DataPrimaryId
        };
        op.BodyTemplate = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
        {
            [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
        }).Render();

        await DialogService.Show(op);
    }

    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");
            }
        });
    }

    private string? InputValue { get; set; }

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

    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);
        }
    }

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

    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);
    }

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

    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);
        });
    }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Component",
            Description = "Parameters of the component referenced in the dialog Body",
            Type = "DynamicComponent",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "BodyContext",
            Description = "pop-up window",
            Type = "object",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "HeaderTemplate",
            Description = "Modal body ModalHeader template",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "BodyTemplate",
            Description = "Modal body ModalBody component",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "FooterTemplate",
            Description = "ModalFooter component at the bottom of the modal",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "IsCentered",
            Description = "Whether to center vertically",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "IsScrolling",
            Description = "Whether to scroll when the text of the pop-up window is too long",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "ShowCloseButton",
            Description = "whether to show the close button",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowHeaderCloseButton",
            Description = "Whether to display the close button on the right side of the title bar",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowFooter",
            Description = "whether to display Footer",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.ShowPrintButton),
            Description = "Whether to show the print button",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.ShowPrintButtonInHeader),
            Description = "Whether the print button is displayed in the Header",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Size",
            Description = "尺寸",
            Type = "Size",
            ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
            DefaultValue = "Large"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.FullScreenSize),
            Description = "Full screen when smaller than a certain size",
            Type = "Size",
            ValueList = "None / Always / Small / Medium / Large / ExtraLarge",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "Title",
            Description = "Popup title",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " not set "
        },
        new AttributeItem() {
            Name = nameof(DialogOption.PrintButtonText),
            Description = "print button display text",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "The value set in the resource file"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.ShowMaximizeButton),
            Description = "Whether to show the maximize button",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        }
    };
}

B station related video link

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
img
Themes
Bootstrap
Motronic
Ant Design (完善中)
DevUI (制作中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor Component library updated to 7.0.8-beta05

Bootstrap Blazor at present has more than 120 components. This component is based on Bootstrap Blazor An enterprise-level component library that provides several types of common components such as layout, navigation, form, data, notification, icon, voice, etc. Each component has been carefully designed with modularity, responsiveness and excellent performance. Starting from more practical scenarios, meeting the needs of various scenarios, greatly reducing the time cost of developers, greatly shortening the development cycle, greatly improving development efficiency, and providing a set of General Rights Management System Example project。Bootstrap Blazor Products are maintained by a professional full-time technical team, with efficient response speed, diversified solutions, long-term support, and enterprise-level support. At present, it has been used in many well-known state-owned enterprises, and the project is running stably with a maximum of 1200 people online. On the right is the QR code of the Chinese Blazor QQ community with the largest number of people in China, welcome to scan and join the group.

component updated to 6.6.0 Change log [portal] If the component brings you convenience, please help to light up the project Star github gitee

QQGroup
QQ 795206915