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>

 

呈现效果

 

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