BootstrapBlazor 智能生成神器（一）AutoGenerateColumnAttribute 特性介紹

原文連接：http://www.rzrgm.cn/ysmc/p/16074645.html

BootstrapBlazor 官網(wǎng)地址：https://www.blazor.zone

介紹

　　BootstrapBlazor 中的 Table 組件、EditorForm 表單組件、ValidateForm 表單組件等等組件，都具有根據(jù)實體類自動生成相應功能的能力，而這里起到關鍵作用的就是 AutoGenerateColumnAttribute，從命名可以得知，這是一個特性，讓我們來看看他支持哪些功能吧，還有很多沒列出來，實在是太多了，感興趣的可以下載源碼看看傳送門。

屬性	類型	作用	說明
Order	int	獲得/設置顯示順序	規(guī)則如下： >0時排前面，1,2,3... =0時排中間(默認) <0時排后面，...-3,-2,-1
Ignore	bool	獲得/設置是否忽略	默認為 false 不忽略
DefaultSort	bool	獲得/設置是否為默認排序列	默認為 false
SkipValidate	bool	獲得/設置是否不進行驗證	默認為 false
IsReadonlyWhenAdd	bool	獲得/設置新建時此列只讀	默認為 false
IsReadonlyWhenEdit	bool	獲得/設置編輯時此列只讀	默認為 false
DefaultSortOrder	SortOrder	獲得/設置是否為默認排序規(guī)則	默認為 SortOrder.Unset
Width	int	獲得/設置列寬
Fixed	bool	獲得/設置是否固定本列	默認 false 不固定
Visible	bool	獲得/設置列是否顯示	默認為 true 可見的
CssClass	string?	獲得/設置列 td 自定義樣式	默認為 null 未設置
ShownWithBreakPoint	BreakPoint	獲得/設置顯示節(jié)點閾值	默認值 BreakPoint.None 未設置
FormatString	string?	格式化字符串	如時間類型設置 yyyy-MM-dd
PlaceHolder	string?	獲得/設置 placeholder 文本	默認為 null
Formatter	Func<object?, Task<string>>?	獲得/設置列格式化回調委托
HeaderTemplate	RenderFragment<ITableColumn>?	獲得/設置表頭模板
ComponentType	Type?	獲得/設置組件類型	默認為 null
Template	RenderFragment<object>?	獲得/設置顯示模板
Step	object?	獲得/設置步長	默認為 1
Rows	int	獲得/設置 Textarea 行數(shù)
PropertyType	Type?	獲得屬性類型
Text	string?	獲得/設置當前屬性顯示文字列頭或者標簽名稱

實戰(zhàn)

　　下面我們來看看它在 ValidateForm 組件與 EditorForm 組件中的表現(xiàn)

實體類 Foo.cs

 1 public class Foo
 2 {
 3     /// <summary>
 4     ///
 5     /// </summary>
 6     [Key]
 7     [Display(Name = "主鍵")]
 8     [AutoGenerateColumn(Ignore = true)]
 9     public int Id { get; set; }
10 
11     /// <summary>
12     ///
13     /// </summary>
14     [Required(ErrorMessage = "{0}不能為空")]
15     [AutoGenerateColumn(Order = 10, Filterable = true, Searchable = true)]
16     [Display(Name = "姓名")]
17     public string? Name { get; set; }
18 
19     /// <summary>
20     ///
21     /// </summary>
22     [AutoGenerateColumn(Order = 1, FormatString = "yyyy-MM-dd", Width = 180)]
23     [Display(Name = "日期")]
24     public DateTime? DateTime { get; set; }
25 
26     /// <summary>
27     ///
28     /// </summary>
29     [Display(Name = "地址")]
30     [Required(ErrorMessage = "{0}不能為空")]
31     [AutoGenerateColumn(Order = 20, Filterable = true, Searchable = true)]
32     public string? Address { get; set; }
33 
34     /// <summary>
35     ///
36     /// </summary>
37     [Display(Name = "數(shù)量")]
38     [Required]
39     [AutoGenerateColumn(Order = 40, Sortable = true)]
40     public int Count { get; set; }
41 
42     /// <summary>
43     ///
44     /// </summary>
45     [Display(Name = "是/否")]
46     [AutoGenerateColumn(Order = 50)]
47     public bool Complete { get; set; }
48 
49     /// <summary>
50     ///
51     /// </summary>
52     [Required(ErrorMessage = "請選擇學歷")]
53     [Display(Name = "學歷")]
54     [AutoGenerateColumn(Order = 60)]
55     public EnumEducation? Education { get; set; }
56 
57     /// <summary>
58     ///
59     /// </summary>
60     [Required(ErrorMessage = "請選擇一種{0}")]
61     [Display(Name = "愛好")]
62     [AutoGenerateColumn(Order = 70, Editable = false)]
63     public IEnumerable<string> Hobby { get; set; } = new List<string>();
64 }

頁面 Foo.razor

 1 <ValidateForm Model="@ValidateModel">
 2         <EditorForm TModel="Foo">
 3             <FieldItems>
 4                 <EditorItem @bind-Field="@context.DateTime" Readonly="true" />
 5                 <EditorItem @bind-Field="@context.Hobby" Items="@Hobbys" />
 6             </FieldItems>
 7             <Buttons>
 8                 <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text='提交' />
 9             </Buttons>
10         </EditorForm>
11 </ValidateForm>

呈現(xiàn)效果

同時支持根據(jù)實體類屬性的特性進行表單驗證，非常的好用

posted @ 2022-03-31 09:34 一事冇誠閱讀(2128) 評論(0) 收藏舉報

刷新頁面返回頂部

一事冇誠

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

BootstrapBlazor 智能生成神器（一）AutoGenerateColumnAttribute 特性介紹

介紹

實戰(zhàn)

公告