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>

 

呈现效果

 

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

 

posted @ 2022-03-31 09:34  一事冇诚  阅读(2005)  评论(0)  编辑  收藏  举报