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 Complete 字段不显示

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...

通过设置 CompnentType 属性值来控制渲染组件类型

Demo
  • Inline 布局模式下通过设置 LabelAlign="Alignment.Right" 使表单内标签右对齐
  • Buttons 模板内可嵌套 div 并设置样式 text-end 使按钮右侧对齐
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> <b>Complete</b> 字段不显示</p>
    <GroupBox Title="表单示例" style="margin-top: 1.5rem;">
        <EditorForm Model="@Model">
            <FieldItems>
                <EditorItem @bind-Field="@context.Education" Editable="false" />
                <EditorItem @bind-Field="@context.Complete" Editable="false" />
                <EditorItem @bind-Field="@context.Hobby">
                    <EditTemplate Context="value">
                        <div class="col-12">
                            <CheckboxList @bind-Value="@context.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="@context.DateTime" Readonly="true" />
                    <EditorItem @bind-Field="@context.Hobby">
                        <EditTemplate Context="value">
                            <div class="col-12">
                                <CheckboxList @bind-Value="@context.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>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="@context.Name" />
                <EditorItem @bind-Field="@context.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 TModel="Foo" AutoGenerateAllItem="false">
                <FieldItems>
                    <EditorItem @bind-Field="@context.Name" />
                    <EditorItem @bind-Field="@context.Address" />
                    <EditorItem @bind-Field="@context.Count">
                        <EditTemplate Context="value">
                            <div class="col-12 col-sm-6">
                                <Select SkipValidate="true" @bind-Value="@context.Count" Items="@DummyItems" ShowSearch="true" />
                            </div>
                            <div class="col-12 col-sm-6">
                                <BootstrapInput Value="@context.Count" readonly="true" />
                            </div>
                        </EditTemplate>
                    </EditorItem>
                    <EditorItem @bind-Field="@context.Hobby" Data="@Hobbys" />
                </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 TModel="Foo" ItemsPerRow="3">
                <FieldItems>
                    <EditorItem @bind-Field="@context.Hobby" Data="@Hobbys" />
                </FieldItems>
                <Buttons>
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="提交" />
                </Buttons>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</Block>

<Block Title="自定义渲染组件类型" Introduction="通过设置 <code>CompnentType</code> 属性值来控制渲染组件类型">
    <ul class="ul-demo">
        <li><code>Inline</code> 布局模式下通过设置 <code>LabelAlign="Alignment.Right"</code> 使表单内标签右对齐</li>
        <li><code>Buttons</code> 模板内可嵌套 <code>div</code> 并设置样式 <code>text-end</code> 使按钮右侧对齐</li>
    </ul>
    <ValidateForm Model="@Model">
        <EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right">
            <FieldItems>
                <EditorItem @bind-Field="@context.Hobby" Data="@Hobbys" />
            </FieldItems>
            <Buttons>
                <div class="text-end">
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="提交" />
                </div>
            </Buttons>
        </EditorForm>
    </ValidateForm>
</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
        };

        [NotNull]
        private IEnumerable<SelectedItem>? Hobbys { get; set; }

        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")
        };

        /// <summary>
        /// OnInitialized 方法
        /// </summary>
        protected override void OnInitialized()
        {
            base.OnInitialized();

            Hobbys = Foo.GenerateHobbys(Localizer);
        }

        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"
            },
            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"
            }
        };

        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 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