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

Bootstrap Blazor 官網地址：https://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 }

　　好了，沒了，就這么點東西，就實作了上面展示的所有功能，當然，免不了會有小伙伴問了，那資料怎么來？這個問題問得相當好啊，我們的組件只是 UI 組件庫，資料怎么來的我組件真管不著，但是，我們也精心為大家準備了相當大的驚喜，讓你可以一行代碼，橫掃 crud！這個肯定是下回分解了，嘿嘿嘿......

　　你們的點贊，是我分享的最大動力，同時也非常希望大家多多交流評論，一個人獨自成長路真的很遙遠，大家一起成長唄！下期預告，Table 組件的自定義模板......

寫在最后

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

　　希望大佬們看到這篇文章，能給專案點個star支持下，感謝各位！

star流程：

1、訪問點擊專案鏈接：BootstrapBlazor

2、點擊star，如下圖，即可完成star，關注專案不迷路：

另外還有兩個GVP專案，大佬們方便的話也點下star唄，非常感謝：

　　BootstrapAdmin 專案地址：
　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 專案地址：
　　https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）歡迎加群討論

　　 BA & Blazor ①（795206915）　　　　　　　 BA & Blazor ②（675147445）

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/465916.html

標籤：.NET技术

上一篇：.NET 6上的WebView2體驗

下一篇：對字符范圍做大小寫轉換

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

寫在最后