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