BootstrapBlazor 智能生成神器(一)AutoGenerateColumnAttribute 特性介绍
1.【转载】NETCore Bootstrap Admin 通用后台管理权限 [2]: Blazor 版本介绍2.【转载】开源 一套 Blazor Server 端精致套件3.【转载】Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍4.【转载】Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍5.BootstrapBlazor 组件库介绍6.BootstrapBlazor 组件库使用体验---Table篇7.Bootstrap Blazor 使用模板创建项目8.BootstrapBlazor-Table9.BootstrapBlazor-ValidateForm 表单验证组件
10.BootstrapBlazor 智能生成神器(一)AutoGenerateColumnAttribute 特性介绍
11.BootstrapBlazor - EditorForm 表单组件(一)12.BootstrapBlazor--Input 组件13.BootstrapBlazor 模板安装14.【转载】Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍15.BA & Blazor 技术交流群16.Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行17.Bootstrap Blazor AutoComplete 自动完成 组件18.Bootstrap Blazor Table 组件(四)自定义列生成19.Bootstrap Blazor Table 组件(三)智能生成20.Bootstrap Blazor 模板使用(一)Layout 组件21.Bootstrap Blazor Timer 计时器组件22.Bootstrap Blazor Cascader 级联选择组件23.Blazor 组件通讯24.Bootstrap Blazor 组件库 Row 布局组件(栅格系统)25.Bootstrap Blazor Table 组件(二)手动刷新组件数据26.Blazor 生命周期27.Bootstrap Blazor Modal 模态框组件28.Bootstrap Blazor 组件介绍原文连接: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>
呈现效果
同时支持根据实体类属性的特性进行表单验证,非常的好用
本文来自博客园,作者:一事冇诚,转载请注明原文链接:https://www.cnblogs.com/ysmc/p/16074645.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战