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">
                        <div class="form-group col-12">
                            <CheckboxList @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="@ValidateModel.DateTime" Readonly="true" />
                    <EditorItem @bind-Field="@ValidateModel.Hobby">
                        <EditTemplate Context="value">
                            <div class="form-group col-12">
                                <CheckboxList @bind-Value="@ValidateModel.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="@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 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" 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 Model="@Model" ItemsPerRow="3">
                <FieldItems>
                    <EditorItem @bind-Field="@Model.Hobby" Data="@Hobbys" />
                </FieldItems>
                <Buttons>
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="提交" />
                </Buttons>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</Block>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Title="EditorItem 属性" Items="@GetEditorItemAttributes()" />
根据相关法律政策,该内容无法显示

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload