Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

EditDialog edit popup

Automatic rendering of edit popups by binding the data model

EditDialog The component is an extension of the Dialog component and is suitable for data popup editing.

Tips

Inject the service by calling DialogService of ShowEditDialog The method directly pops up the editing dialog box, which greatly reduces the amount of code. EditDialogOption Configuration class inheritance DialogOption，For more parameter settings, please click [portal]"

Basic usage

Automatically generate editable forms for each field of the model by binding the TModel data model

Demo

@inject IStringLocalizer<EditDialogNormal> Localizer

<div>
    <Button Text="@Localizer["LeftAlignedButton"]" OnClickWithoutRender="@ShowDialog" />
    <Button Text="@Localizer["RightAlignedButton"]" OnClickWithoutRender="@ShowAlignDialog" />
    <BlockLogger @ref="Trace" class="mt-3" />
</div>

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

    [Inject]
    [NotNull]
    private DialogService? DialogService { 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>
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? FooLocalizer { get; set; }

    private Foo Model { get; set; } = new Foo()
    {
        Name = "Name 1234",
        Address = "Address 1234"
    };

    private async Task ShowDialog()
    {
        var items = Utility.GenerateEditorItems<Foo>();
        var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
        item.Items = Foo.GenerateHobbys(FooLocalizer);

        var option = new EditDialogOption<Foo>()
        {
            Title = "edit dialog",
            Model = Model,
            Items = items,
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            OnCloseAsync = () =>
            {
                Trace.Log("close button is clicked");
                return Task.CompletedTask;
            },
            OnEditAsync = context =>
            {
                Trace.Log("save button is clicked");
                return Task.FromResult(true);
            }
        };

        await DialogService.ShowEditDialog(option);
    }

    private async Task ShowAlignDialog()
    {
        var items = Utility.GenerateEditorItems<Foo>();
        var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
        item.Items = Foo.GenerateHobbys(FooLocalizer);

        var option = new EditDialogOption<Foo>()
        {
            Title = "edit dialog",
            Model = Model,
            Items = items,
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            LabelAlign = Alignment.Right,
            OnCloseAsync = () =>
            {
                Trace.Log("close button is clicked");
                return Task.CompletedTask;
            },
            OnEditAsync = context =>
            {
                Trace.Log("save button is clicked");
                return Task.FromResult(true);
            }
        };

        await DialogService.ShowEditDialog(option);
    }
}

Setting bound model part property does not show

By setting the Editable=false of the IEditorItem instance, the editable pop-up window cannot be edited.

Demo

@inject IStringLocalizer<EditDialogNoRender> Localizer

<div>
    <Button Text="@Localizer["PopupButton"]" OnClickWithoutRender="@ShowEditDialog" />
    <BlockLogger @ref="Trace" class="mt-3" />
</div>

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

    [Inject]
    [NotNull]
    private DialogService? DialogService { 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>
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? FooLocalizer { get; set; }

    private Foo Model { get; set; } = new Foo()
    {
        Name = "Name 1234",
        Address = "Address 1234"
    };

    private async Task ShowEditDialog()
    {
        var items = Utility.GenerateEditorItems<Foo>();
        var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
        item.Items = Foo.GenerateHobbys(FooLocalizer);

        item = items.First(i => i.GetFieldName() == nameof(Foo.Address));
        item.Editable = false;
        item = items.First(i => i.GetFieldName() == nameof(Foo.Count));
        item.Editable = false;

        var option = new EditDialogOption<Foo>()
        {
            Title = "edit dialog",
            Model = Model,
            Items = items,
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            OnCloseAsync = () =>
            {
                Trace.Log("close button is clicked");
                return Task.CompletedTask;
            },
            OnEditAsync = context =>
            {
                Trace.Log("save button is clicked");
                 return Task.FromResult(true);
            }
        };

        await DialogService.ShowEditDialog(option);
    }
}

EditDialogOption property

B station related video link

[portal]

交流群

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

EditDialog edit popup

Automatic rendering of edit popups by binding the data model

Tips

Demo

Demo

EditDialogOption property

Bootstrap Blazor Component library updated to 7.4.4-beta01