Blazor 组件库 BootstrapBlazor 中EditorForm组件介绍

组件介绍

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

• 绑定模型默认自动生成全部属性，可以通过设置 AutoGenerateAllItem 更改为不自动生成

• 如不需要编辑列，设置 Editable 即可，默认值为 true 生成编辑组件

• 复杂编辑列，设置 EditTemplate 模板，进行自定义组件进行编辑

• 表单内按钮可以设置多个，设置 Buttons 模板即可

默认情况下，我们只需要绑定Model就可以了，最基础的代码可以只有一行。

<EditorForm Model="@Model">
    </EditorForm>

会显示Model中的所有字段。

另外我们可以通过绑定内容来做其他的处理。

这个例子的代码如下：

    <EditorForm Model="@Model">
        <FieldItems>
            <EditorItem @bind-Field="@context.Education" Editable="false" />
            <EditorItem @bind-Field="@context.Complete" Editable="false" />
            <EditorItem @bind-Field="@context.Hobby" Items="@Hobbys" />
        </FieldItems>
        <Buttons>
            <Button Icon="fa fa-save" Text="提交" />
        </Buttons>
    </EditorForm>

其中，我们通过 EditorItem配置Education、Complete在EditorForm中不显示，并且配置Hobby为复选框组，并且指定可选内容。

组件的其他属性

Model：绑定的数据模型。

FieldItems：绑定的列模板，可以对每列进行单独处理。

Buttons：按钮模板，处理内部的按钮。

IsDisplay：是否显示为Display控件，默认为false

ShowLabel：是否显示Label，默认为true。

ShowLabelTooltip：是否在鼠标停留时显示全部信息，默认不显示。

AutoGenerateAllItem：是否生成全部字段。默认为ture。当设置为false的时候，则需要在FieldItems中自己设置所有需要显示的内容。

一个例子是：

    <EditorForm Model="@Model" AutoGenerateAllItem="false">
        <FieldItems>
            <EditorItem @bind-Field="@context.Name" />
            <EditorItem @bind-Field="@context.Count" />
        </FieldItems>
    </EditorForm>

这样就只显示Name和Count两个字段。

ItemsPerRow：每行显示组件数量，默认一行只显示一个控件。

RowType：组件布局方式，可选值为Row|Inline，默认值为Row。

LabelAlign：在Inline模式下标签的对齐方式，可选值有 None|Left|Center|Right

EditorItem 的属性

Field：绑定的字段。

FieldType：绑定字段的类型。如果绑定字段时使用了@bind-Field，这里会自动推断类型，可以不写FieldType。

Editable：是否允许编辑，默认为true。

Readonly：是否只读。

Text：前端标签的名字，ShowLabel为true的时候显示。

EditTemplate：自定义编辑模板。

一个例子：

       <EditorForm Model="Model" 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="@value.Count" Items="@DummyItems" ShowSearch="true" />
                        </div>
                        <div class="col-12 col-sm-6">
                            <BootstrapInput Value="@value.Count" Readonly="true" />
                        </div>
                    </EditTemplate>
                </EditorItem>
                <EditorItem @bind-Field="@context.Hobby" Items="@Hobbys" />
            </FieldItems>
            <Buttons>
                <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="提交" />
            </Buttons>
        </EditorForm>

这个例子中，我们给Count字段添加了EditTemplate，然后所以我们在EditorTemplate里可以自由处理Count，添加其他组件，只要保证最后bind修改Count即可。