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

即可。