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

原文连接：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>

呈现效果

同时支持根据实体类属性的特性进行表单验证，非常的好用