原文链接: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)

Bootstrap Blazor Table 组件(三)智能生成的更多相关文章

  1. Bootstrap Blazor Table 组件(四)自定义列生成

    原文链接:https://www.cnblogs.com/ysmc/p/16223154.html Bootstrap Blazor 官方链接:https://www.blazor.zone/tabl ...

  2. Bootstrap Blazor Table 组件(二)

    原文链接:https://www.cnblogs.com/ysmc/p/16128206.html 很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求: 我 ...

  3. Bootstrap Blazor 组件介绍 Table (一)自动生成列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  4. Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  5. Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  6. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  7. Bootstrap Blazor 组件库 Row 布局组件(栅格系统)

    原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...

  8. Bootstrap Blazor 组件库

    项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应 ...

  9. Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)

    Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...

随机推荐

  1. 如何规划一台 Linux 主机,步骤是怎样?

    1.确定机器是做什么用的,比如是做 WEB .DB.还是游戏服务器.不同的用途,机器的配置会有所不同.    2.确定好之后,就要定系统需要怎么安装,默认安装哪些系统.分区怎么做.    3.需要优化 ...

  2. Docker容器内连接宿主机即CentOS的Mysql服务器

    docker的宿主机是虚拟机下的CentOS 博主最近遇到一种情况,从服务器拷贝了一份数据库在宿主机Mysql服务器上,想要用本地的数据库测试自己的代码正确性,但是项目程序都是靠docker一键部署的 ...

  3. SSL的作用?

    SSL能使用户/服务器应用之间的通信不被攻击者窃听,并且始终对服务器进行认证,还可选择对用户进行认证.SSL协议要求建立在可靠的传输层协议(TCP)之上.SSL协议的优势在于它是与应用层协议独立无关的 ...

  4. 说出几条 Java 中方法重载的最佳实践?

    下面有几条可以遵循的方法重载的最佳实践来避免造成自动装箱的混乱. a)不要重载这样的方法:一个方法接收 int 参数,而另个方法接收 Integer 参 数. b)不要重载参数数量一致,而只是参数顺序 ...

  5. 学习Kvm(一)

     背景介绍 传统数据中心面临的问题: 资源使用率低 资源分配不均 自动化能力差 初始化成本高   云计算: 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计 ...

  6. 乱序数组中第k大的数(顺序统计量)

    该问题是顺序统计量中十分经典的问题. 使用快排中的分区法,将第k大的数排序.若双向扫描分区加上三点中值法或绝对中值法,可以保证在 O(n) 时间里找出第k大的数. 补充:可以直接使用C++STL中的n ...

  7. 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可 ...

  8. npx和npm的区别

    npx 是 npm 的高级版本,npx 具有更强大的功能. 用途: 在项目中直接运行指令,直接运行node_modules中的某个指令,不需要输入文件路径 node-modules/.bin/babe ...

  9. Python知识结构

    Python知识结构(点我) 欢迎评论提修改意见

  10. python中其他数据类型内置方法

    补充字符串数据类型内置方法 1.移除字符串首尾的指定字符可以选择方向1: s1 = '$$$jason$$$' print(s1.strip('$')) # jason print(s1.lstrip ...