Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

EditorForm 表单组件

通过绑定数据模型自动呈现编辑表单

EditorForm 组件是一个非常实用的组件,当进行数据编辑时,仅需要将 Model 属性赋值即可。

  • 绑定模型默认自动生成全部属性,可以通过设置 AutoGenerateAllItem 更改为不自动生成
  • 如不需要编辑列,设置 Editable 即可,默认值为 true 生成编辑组件
  • 复杂编辑列,设置 EditTemplate 模板,进行自定义组件进行编辑
  • 表单内按钮可以设置多个,设置 Buttons 模板即可

基础用法

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

Demo

直接绑定模型 Model,设置 Education 字段不显示

Loading...

开启数据验证

通过嵌套 ValidateForm 组件实现数据合规检查功能

Demo

组件内置到 ValidateForm 内开启数据合规检查功能,爱好 字段使用 EditTemplate 模板自定义组件呈现数据

通过设置 Readonly 属性,使 生日 字段为只读

Loading...

默认不自动生成

通过设置属性 AutoGenerateAllItem 值为 false,禁止自动生成属性,通过设置 FieldItems 内部集合来控制显示属性

Demo

本例中通过设置 AutoGenerateAllItem 值为 false,关闭自动生成功能,通过手动增加两个 EditorItem 编辑项来呈现表单编辑

Loading...

表单组件内的组件绑定与模型无关的字段

通过设置属性 AutoGenerateAllItem 值为 false,禁止自动生成属性,通过设置 FieldItems 内部集合来控制显示属性

Demo

在某些情况下表单中有些列的值可能是二级分类等等,需要知道一级分类的信息,这个时候一级分类需要额外的组件来呈现,如果 Select,而这个组件是与当前上下文绑定模型 Model 无关的,这种需求中通过设置 SkipValidate 值为 true,关闭此组件的模型验证功能即可

Loading...

设置每行显示控件数量

通过设置 ItemsPerRow 属性值来控制布局

Demo

本示例设置 ItemsPerRow=3 每行显示 3 个组件

Loading...

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 = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload