BootstrapBlazor - EditorForm 表單組件（一）

原文鏈接：http://www.rzrgm.cn/ysmc/p/16053652.html

官網例子鏈接：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<TModel>	—	—
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<object>	—	—

posted @ 2022-03-28 00:54 一事冇誠閱讀(1930) 評論(0) 收藏舉報

刷新頁面返回頂部

一事冇誠

微軟最有價值專家（微軟MVP 2023-2025）

BootstrapBlazor - EditorForm 表單組件（一）

通過綁定數據模型自動呈現編輯表單

Attributes 屬性

公告