BootstrapBlazor - EditorForm 表单组件(一)
原文链接:
官网例子链接:https://www.blazor.zone/editorforms
通过绑定数据模型自动呈现编辑表单
EditorForm 组件是一个非常实用的组件,当进行数据编辑时,仅需要将 Model 属性赋值即可。
- 绑定模型默认自动生成全部属性,可以通过设置
AutoGenerateAllItem更改为不自动生成 - 如不需要编辑列,设置
Editable即可,默认值为true生成编辑组件 - 复杂编辑列,设置
EditTemplate模板,进行自定义组件进行编辑 - 表单内按钮可以设置多个,设置
Buttons模板即可
<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>
Attributes 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| Model | 当前绑定数据模型 | TModel | — | — |
| FieldItems | 绑定列模板 |
RenderFragment |
— | — |
| Buttons | 按钮模板 | RenderFragment | — | — |
| IsDisplay | 是否显示为 Display 组件 | bool | true/false | false |
| ShowLabel | 是否显示 Label | bool | true/false | true |
| ShowLabelTooltip | 鼠标悬停标签时显示完整信息 | bool? | true/false/null | null |
| AutoGenerateAllItem | 是否生成所有属性 | bool | true/false | true |
| ItemsPerRow | 每行显示组件数量 | int? | — | — |
| RowType | 设置组件布局方式 | RowType | Row|Inline | Row |
| LabelAlign | Inline 布局模式下标签对齐方式 | Alignment | None|Left|Center|Right | None |
AttrAttributeTitle
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| Field | 当前绑定数据值 | TValue | — | — |
| FieldType | 绑定列数据类型 | Type | — | — |
| Editable | 是否允许编辑 | bool | true/false | true |
| Readonly | 是否只读 | bool | true/false | false |
| Text | 编辑列前置标签名 | string | — | — |
| EditTemplate | 列编辑模板 | RenderFragment | — | — |