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

一事冇誠發表於2022-03-31
bootBlazor

原文連線：https://www.cnblogs.com/ysmc/p/16074645.html

BootstrapBlazor 官網地址：https://www.blazor.zone

介紹

　　BootstrapBlazor 中的 Table 元件、EditorForm 表單元件、ValidateForm 表單元件 等等元件，都具有根據實體類自動生成相應功能的能力，而這裡起到關鍵作用的就是 AutoGenerateColumnAttribute，從命名可以得知，這是一個特性，讓我們來看看他支援哪些功能吧。

屬性 型別 作用 說明
Order int  獲得/設定 顯示順序

規則如下：

>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 獲得/設定 是否為預設排序規則 預設為 SortOrder.Unset
Width int  獲得/設定 列寬  
Fixed bool 獲得/設定 是否固定本列 預設 false 不固定
Visible bool 獲得/設定 列是否顯示 預設為 true 可見的
CssClass string? 獲得/設定 列 td 自定義樣式 預設為 null 未設定
ShownWithBreakPoint BreakPoint 獲得/設定 顯示節點閾值 預設值 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 行數  
PropertyType Type? 獲得 屬性型別  
Text string? 獲得/設定 當前屬性顯示文字 列頭或者標籤名稱

 

 

實戰

　　下面我們來看看它在 ValidateForm 元件 與 EditorForm 元件中的表現

實體類 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 = "數量")]
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>

 

呈現效果

 

同時支援根據實體類屬性的特性進行表單驗證，非常的好用

 

相關文章