Bootstrap Blazor Table 組件（三）智能生成

2022 年 4 月 28 日
筆記
Blazor, BootstrapBlazor, c#

原文鏈接：//www.cnblogs.com/ysmc/p/16201153.html

Bootstrap Blazor 官網地址：//www.blazor.zone

　　有了解過 Bootstrap Blazor 組件庫的，都應該知道 Table 組件是多麼的強大，我在之前的文章中提過，可以通過實體屬性特徵智能生成 Table 組件所有常用的功能，讓你的 razor 頁面非常簡潔，感興趣的可以到我這一篇文章去看看：BootstrapBlazor 智能生成神器（一）AutoGenerateColumnAttribute 特性介紹 – 一事冇誠 – 博客園 (cnblogs.com)

　　先一睹頁面效果，多選、分頁、排序、過濾、新增、編輯、刪除、全局搜索、高級搜索，滿足絕大多數的列表展示需求了，自動是/否字段還是顯示的是一個組件。

　　以上的功能你可能會認為需要編寫很多的前端代碼，其實正好相反，我們 Bootstrap Blazor 項目的宗旨就是簡潔、高效，讓你用最少的代碼實現最多的功能，我們一起看看要實現這樣的頁面，razor 頁面需要的代碼是多少！

　　你沒有看錯，就只要這麼多，可以說就一個 Table 標籤的事，其它的功能是否開啟，全是組件的屬性參數，有小夥伴可能會問了，上面說的是根據實體類屬性特徵智能生成的，那特性肯定很多吧。我可以很負責的告訴你，你不認識的只有一個，都是沿用之前大家熟悉的特性，下面是 Foo 實體類：

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