Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

EditDialog 编辑弹窗

通过绑定数据模型自动呈现编辑弹窗

EditDialog 组件是 Dialog 组件的扩展,适用于数据弹出窗编辑。

通过绑定 TModel 数据模型,自动生成模型各个字段的可编辑表单

Demo

通过设置 IEditorItem 实例的 Editable=false, 实现编辑弹窗不显示此属性

Demo

EditDialogOption 属性

Loading...
@page "/editdialogs"

<h3>EditDialog 编辑弹窗</h3>

<h4>通过绑定数据模型自动呈现编辑弹窗</h4>

<p><code>EditDialog</code> 组件是 <code>Dialog</code> 组件的扩展,适用于数据弹出窗编辑。</p>

<Tips>
	<p>通过调用注入服务 <code>DialogService</code> 的 <code>ShowEditDialog</code> 方法直接弹出编辑对话框,大大减少代码量。<code>EditDialogOption</code> 配置类继承 <code>DialogOption</code>,更多参数设置请点击 <a href="dialogs" target="_blank">[传送门]</a></p>
</Tips>

<Block Title="基础用法" Introduction="通过绑定 <code>TModel</code> 数据模型,自动生成模型各个字段的可编辑表单">
	<Button Text="编辑弹窗(左对齐)" OnClickWithoutRender="@ShowDialog" />
	<Button Text="编辑弹窗(右对齐)" OnClickWithoutRender="@ShowAlignDialog" />
	<BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="设置绑定模型部分属性不显示" Introduction="通过设置 <code>IEditorItem</code> 实例的 <code>Editable=false</code>, 实现编辑弹窗不显示此属性">
	<Button Text="弹窗" OnClickWithoutRender="@ShowEditDialog" />
</Block>

<AttributeTable Items="@GetAttributes()" Title="EditDialogOption 属性" />
// 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 BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class EditDialogs
    {
        private Foo Model { get; set; } = new Foo()
        {
            Name = "Name 1234",
            Address = "Address 1234"
        };

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

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

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

        private async Task ShowDialog()
        {
            var items = EditorItem<Foo>.GenerateEditorItems();
            var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
            item.Data = Foo.GenerateHobbys(Localizer);

            var option = new EditDialogOption<Foo>()
            {
                Title = "编辑对话框",
                Model = Model,
                Items = items,
                ItemsPerRow = 2,
                RowType = RowType.Inline,
                OnCloseAsync = () =>
                {
                    Trace.Log("关闭按钮被点击");
                    return Task.CompletedTask;
                },
                OnSaveAsync = context =>
                {
                    Trace.Log("保存按钮被点击");
                    return Task.FromResult(true);
                }
            };

            await DialogService.ShowEditDialog(option);
        }

        private async Task ShowAlignDialog()
        {
            var items = EditorItem<Foo>.GenerateEditorItems();
            var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
            item.Data = Foo.GenerateHobbys(Localizer);

            var option = new EditDialogOption<Foo>()
            {
                Title = "编辑对话框",
                Model = Model,
                Items = items,
                ItemsPerRow = 2,
                RowType = RowType.Inline,
                LabelAlign = Alignment.Right,
                OnCloseAsync = () =>
                {
                    Trace.Log("关闭按钮被点击");
                    return Task.CompletedTask;
                },
                OnSaveAsync = context =>
                {
                    Trace.Log("保存按钮被点击");
                    return Task.FromResult(true);
                }
            };

            await DialogService.ShowEditDialog(option);
        }

        private async Task ShowEditDialog()
        {
            var items = EditorItem<Foo>.GenerateEditorItems();
            var item = items.First(i => i.GetFieldName() == nameof(Foo.Hobby));
            item.Data = Foo.GenerateHobbys(Localizer);

            // 设置 地址与数量 不可编辑
            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 = "编辑对话框",
                Model = Model,
                Items = items,
                ItemsPerRow = 2,
                RowType = RowType.Inline,
                OnCloseAsync = () =>
                {
                    Trace.Log("关闭按钮被点击");
                    return Task.CompletedTask;
                },
                OnSaveAsync = context =>
                {
                    Trace.Log("保存按钮被点击");
                    return Task.FromResult(true);
                }
            };

            await DialogService.ShowEditDialog(option);
        }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "是否显示标签",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "Model",
                Description = "泛型参数用于呈现 UI",
                Type = "TModel",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Items",
                Description = "编辑项集合",
                Type = "IEnumerable<IEditorItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "DialogBodyTemplate",
                Description = "EditDialog Body 模板",
                Type = "RenderFragment<TModel>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "CloseButtonText",
                Description = "关闭按钮文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "关闭"
            },
            new AttributeItem() {
                Name = "SaveButtonText",
                Description = "保存按钮文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "保存"
            },
            new AttributeItem() {
                Name = "OnSaveAsync",
                Description = "保存回调委托",
                Type = "Func<Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ItemsPerRow",
                Description = "每行显示组件数量",
                Type = "int?",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "RowType",
                Description = "设置组件布局方式",
                Type = "RowType",
                ValueList = "Row|Inline",
                DefaultValue = "Row"
            },
            new AttributeItem() {
                Name = "LabelAlign",
                Description = "Inline 布局模式下标签对齐方式",
                Type = "Alignment",
                ValueList = "None|Left|Center|Right",
                DefaultValue = "None"
            }
        };
    }
}

B 站相关视频链接

[传送门]

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload