
EditDialog 编辑弹窗
通过绑定数据模型自动呈现编辑弹窗
EditDialog
组件是 Dialog
组件的扩展,适用于数据弹出窗编辑。
基础用法
通过绑定 TModel
数据模型,自动生成模型各个字段的可编辑表单
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" />
<Logger @ref="Trace" class="mt-3" />
</Block>
<Dialog></Dialog>
<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 Logger? 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,
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 = " — "
}
};
}
}