
EditorForm 表单组件
通过绑定数据模型自动呈现编辑表单
EditorForm
组件是一个非常实用的组件,当进行数据编辑时,仅需要将 Model
属性赋值即可。
- 绑定模型默认自动生成全部属性,可以通过设置
AutoGenerateAllItem
更改为不自动生成 - 如不需要编辑列,设置
Editable
即可,默认值为true
生成编辑组件 - 复杂编辑列,设置
EditTemplate
模板,进行自定义组件进行编辑 - 表单内按钮可以设置多个,设置
Buttons
模板即可
基础用法
通过绑定 TModel
数据模型,自动生成模型各个字段的可编辑表单
Demo
直接绑定模型 Model
,设置 Education 字段不显示
Loading...
开启数据验证
通过嵌套 ValidateForm
组件实现数据合规检查功能
Demo
组件内置到 ValidateForm
内开启数据合规检查功能,爱好 字段使用 EditTemplate
模板自定义组件呈现数据
通过设置 Readonly
属性,使 生日
字段为只读
默认不自动生成
通过设置属性 AutoGenerateAllItem
值为 false
,禁止自动生成属性,通过设置 FieldItems
内部集合来控制显示属性
Demo
本例中通过设置 AutoGenerateAllItem
值为 false
,关闭自动生成功能,通过手动增加两个 EditorItem
编辑项来呈现表单编辑
Loading...
表单组件内的组件绑定与模型无关的字段
通过设置属性 AutoGenerateAllItem
值为 false
,禁止自动生成属性,通过设置 FieldItems
内部集合来控制显示属性
Demo
在某些情况下表单中有些列的值可能是二级分类等等,需要知道一级分类的信息,这个时候一级分类需要额外的组件来呈现,如果 Select
,而这个组件是与当前上下文绑定模型 Model
无关的,这种需求中通过设置 SkipValidate
值为 true
,关闭此组件的模型验证功能即可
设置每行显示控件数量
通过设置 ItemsPerRow
属性值来控制布局
Demo
本示例设置 ItemsPerRow=3
每行显示 3 个组件
Attributes
Loading...
EditorItem 属性
Loading...
@page "/editorforms"
<h3>EditorForm 表单组件</h3>
<h4>通过绑定数据模型自动呈现编辑表单</h4>
<p><code>EditorForm</code> 组件是一个非常实用的组件,当进行数据编辑时,仅需要将 <code>Model</code> 属性赋值即可。</p>
<ul class="ul-demo">
<li>绑定模型默认自动生成全部属性,可以通过设置 <code>AutoGenerateAllItem</code> 更改为不自动生成</li>
<li>如不需要编辑列,设置 <code>Editable</code> 即可,默认值为 <code>true</code> 生成编辑组件</li>
<li>复杂编辑列,设置 <code>EditTemplate</code> 模板,进行自定义组件进行编辑</li>
<li>表单内按钮可以设置多个,设置 <code>Buttons</code> 模板即可</li>
</ul>
<Block Title="基础用法" Introduction="通过绑定 <code>TModel</code> 数据模型,自动生成模型各个字段的可编辑表单">
<p>直接绑定模型 <code>Model</code>,设置 <b>Education</b> 字段不显示</p>
<GroupBox Title="表单示例" style="margin-top: 1.5rem;">
<EditorForm Model="@Model">
<FieldItems>
<EditorItem @bind-Field="@Model.Education" Editable="false" />
<EditorItem @bind-Field="@Model.Complete" Editable="false" />
<EditorItem @bind-Field="@Model.Hobby">
<EditTemplate Context="value">
@{
var model = value as Foo;
}
<div class="form-group col-12">
<CheckboxList TValue="IEnumerable<string>" @bind-Value="@model!.Hobby" Items="@Hobbys" />
</div>
</EditTemplate>
</EditorItem>
</FieldItems>
<Buttons>
<Button Icon="fa fa-save" Text="提交" />
</Buttons>
</EditorForm>
</GroupBox>
</Block>
<Block Title="开启数据验证" Introduction="通过嵌套 <code>ValidateForm</code> 组件实现数据合规检查功能">
<p>组件内置到 <code>ValidateForm</code> 内开启数据合规检查功能,<b>爱好</b> 字段使用 <code>EditTemplate</code> 模板自定义组件呈现数据</p>
<p>通过设置 <code>Readonly</code> 属性,使 <code>生日</code> 字段为只读</p>
<GroupBox Title="表单示例" style="margin-top: 1.5rem;">
<ValidateForm Model="@ValidateModel">
<EditorForm TModel="Foo">
<FieldItems>
<EditorItem @bind-Field="@Model.DateTime" Readonly="true" />
<EditorItem @bind-Field="@Model.Hobby">
<EditTemplate Context="value">
@{
var model = value as Foo;
}
<div class="form-group col-12">
<CheckboxList @bind-Value="@model!.Hobby" Items="@Hobbys" />
</div>
</EditTemplate>
</EditorItem>
<EditorItem @bind-Field="@Model.Complete">
<EditTemplate Context="value">
<div class="form-group col-6">
<Switch @bind-Value="((Foo)value).Complete" />
</div>
</EditTemplate>
</EditorItem>
</FieldItems>
<Buttons>
<Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="提交" />
</Buttons>
</EditorForm>
</ValidateForm>
</GroupBox>
</Block>
<Block Title="默认不自动生成" Introduction="通过设置属性 <code>AutoGenerateAllItem</code> 值为 <code>false</code>,禁止自动生成属性,通过设置 <code>FieldItems</code> 内部集合来控制显示属性">
<GroupBox Title="表单示例">
<p>本例中通过设置 <code>AutoGenerateAllItem</code> 值为 <code>false</code>,关闭自动生成功能,通过手动增加两个 <code>EditorItem</code> 编辑项来呈现表单编辑</p>
<EditorForm Model="@Model" AutoGenerateAllItem="false">
<FieldItems>
<EditorItem @bind-Field="@Model.Name" />
<EditorItem @bind-Field="@Model.Count" />
</FieldItems>
</EditorForm>
</GroupBox>
</Block>
<Block Title="表单组件内的组件绑定与模型无关的字段" Introduction="通过设置属性 <code>AutoGenerateAllItem</code> 值为 <code>false</code>,禁止自动生成属性,通过设置 <code>FieldItems</code> 内部集合来控制显示属性">
<GroupBox Title="表单示例">
<p>在某些情况下表单中有些列的值可能是二级分类等等,需要知道一级分类的信息,这个时候一级分类需要额外的组件来呈现,如果 <code>Select</code>,而这个组件是与当前上下文绑定模型 <code>Model</code> 无关的,这种需求中通过设置 <code>SkipValidate</code> 值为 <code>true</code>,关闭此组件的模型验证功能即可</p>
<ValidateForm Model="@Model">
<EditorForm Model="@Model" AutoGenerateAllItem="false">
<FieldItems>
<EditorItem @bind-Field="@Model.Name" />
<EditorItem @bind-Field="@Model.Address" />
<EditorItem @bind-Field="@Model.Count">
<EditTemplate Context="value">
<div class="form-group col-6">
<Select TValue="int" SkipValidate="true" @bind-Value="@Model.Count" Items="@DummyItems" ShowSearch="true" />
</div>
<div class="form-group col-6">
<BootstrapInput Value="@Model.Count" readonly="true" />
</div>
</EditTemplate>
</EditorItem>
<EditorItem @bind-Field="@Model.Hobby">
<EditTemplate Context="value">
@{
var model = value as Foo;
}
<div class="form-group col-12">
<CheckboxList TValue="IEnumerable<string>" @bind-Value="@model!.Hobby" Items="@Hobbys" />
</div>
</EditTemplate>
</EditorItem>
</FieldItems>
<Buttons>
<Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="提交" />
</Buttons>
</EditorForm>
</ValidateForm>
</GroupBox>
</Block>
<Block Title="设置每行显示控件数量" Introduction="通过设置 <code>ItemsPerRow</code> 属性值来控制布局">
<p>本示例设置 <code>ItemsPerRow=3</code> 每行显示 3 个组件</p>
<GroupBox Title="布局示例" style="margin-top: 1.5rem;">
<ValidateForm Model="@Model">
<EditorForm Model="@Model" ItemsPerRow="3">
<FieldItems>
<EditorItem @bind-Field="@Model.Hobby" Data="@Hobbys" />
</FieldItems>
<Buttons>
<Button Icon="fa fa-save" Text="提交" />
</Buttons>
</EditorForm>
</ValidateForm>
</GroupBox>
</Block>
<AttributeTable Items="@GetAttributes()" />
<AttributeTable Title="EditorItem 属性" Items="@GetEditorItemAttributes()" />
// 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;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
namespace BootstrapBlazor.Shared.Pages
{
/// <summary>
///
/// </summary>
public sealed partial class EditorForms
{
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
private Foo Model { get; } = new Foo()
{
Name = "张三",
Count = 23,
Address = "测试地址",
DateTime = new DateTime(1997, 12, 05),
Education = EnumEducation.Middel
};
private Foo ValidateModel { get; } = new Foo()
{
Name = "张三",
Count = 23,
DateTime = new DateTime(1997, 12, 05),
Education = EnumEducation.Middel
};
private IEnumerable<SelectedItem> Hobbys => Foo.GenerateHobbys(Localizer);
private List<SelectedItem> DummyItems { get; } = new List<SelectedItem>()
{
new SelectedItem("1", "1"),
new SelectedItem("2", "2"),
new SelectedItem("3", "3"),
new SelectedItem("4", "4"),
new SelectedItem("5", "5")
};
private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Model",
Description = "当前绑定数据模型",
Type = "TModel",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "FieldItems",
Description = "绑定列模板",
Type = "RenderFragment<TModel>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Buttons",
Description = "按钮模板",
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ShowLabel",
Description = "是否显示 Label",
Type = "bool",
ValueList = "true/false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "AutoGenerateAllItem",
Description = "是否生成所有属性",
Type = "bool",
ValueList = "true/false",
DefaultValue = "true"
}
};
private static IEnumerable<AttributeItem> GetEditorItemAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Field",
Description = "当前绑定数据值",
Type = "TValue",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "FieldType",
Description = "绑定列数据类型",
Type = "Type",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "Editable",
Description = "是否允许编辑",
Type = "bool",
ValueList = "true/false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "Readonly",
Description = "是否只读",
Type = "bool",
ValueList = "true/false",
DefaultValue = "false"
},
new AttributeItem() {
Name = "Text",
Description = "编辑列前置标签名",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "EditTemplate",
Description = "列编辑模板",
Type = "RenderFragment<object>",
ValueList = " — ",
DefaultValue = " — "
}
};
}
}