建设网站的 成本,珠海网约车,软件科技开发公司,网站的pv统计功能怎样做前言上一篇介绍过了前后台分离的 NET Core 通用权限管理系统 在这篇文章简要的介绍了 Bootstrap Admin 后台管理框架的一些功能。本篇文章带来的是微软最新出的 Blazor 版本的 NET Core 通用权限管理系统Blazor 简介至于 Blazor 是什么#xff0c;Blazor 的优缺点小伙伴们可以… 前言上一篇介绍过了前后台分离的 NET Core 通用权限管理系统 在这篇文章简要的介绍了 Bootstrap Admin 后台管理框架的一些功能。本篇文章带来的是微软最新出的 Blazor 版本的 NET Core 通用权限管理系统Blazor 简介至于 Blazor 是什么Blazor 的优缺点小伙伴们可以自行在园子里搜索一下相关介绍还是非常多的我这里就不介绍 Blazor 是什么有什么优缺点了。我想阐述的是我个人对 Blazor 技术的一些理解Blazor 刚出来的时候国内外无数文章报道但是有一个显著的特点所有的文章代码讲解等都是围绕微软的那个例子讲解的。换句话说仅限于那个例子。离开那个例子真的自己做个功能讲解的一篇都没有微软自己的文档也非常不健全很多技术细节都是一笔带过。随着时间的推移微软的文档也丰富起来了。根据微软的文档 Blazor 本人用 Blazor 技术将 Bootstrap Admin 后台管理框架重写了一版通过自己编写组件系统的学习了一下 Blazor。通过自己的封装实现了一个小小的框架下面详细的讲解一下。网页布局设计Bootstrap Admin 通用后台管理框架布局采用 AdminLTE 的经典布局如图所示区域被划分为四个区域分别为头部 Header负责显示网站 Logo、小挂件、当前用户信息侧边栏 Sidebar负责显示后台管理的菜单、提供导航功能正文显示区域 Section负责显示各个功能模块的主题部分页脚 Footer负责显示系统信息显示区域设计正文显示区域在后台管理框架中基本是字典表维护这种类似的单表维护需要提供增、删、改、查基本操作现在将显示区域分割成三个部分TabSet 区域用于显示多 TabQuery 区域用于显示查询条件Table 区域用户显示符合过滤条件的数据结果集合这里提供分页、编辑、删除等操作组件设计EditPage Iddict TItemBootstrap.Security.BootstrapDict QueryModelQueryModel OnQueryQuery OnAddAdd OnDeleteDelete OnSaveSaveQueryBodyLgbInputText bind-Valuecontext.Category maxlength50 /Select ItemsQueryDefine TItemint bind-Valuecontext.Define /LgbInputText bind-Valuecontext.Name maxlength50 //QueryBodyTableHeaderLgbTableHeader TItemstring bind-Valuecontext.Category/LgbTableHeaderLgbTableHeader TItemstring bind-Valuecontext.Name/LgbTableHeaderLgbTableHeader TItemstring bind-Valuecontext.Code/LgbTableHeaderLgbTableHeader TItemint bind-Valuecontext.Define/LgbTableHeader/TableHeaderRowTemplatetdcontext.Category/tdtdcontext.Name/tdtdcontext.Code/tdtd(DefineItems.FirstOrDefault(d d.Value context.Define.ToString())?.Text ?? -)/td/RowTemplateEditTemplatediv classrowLgbInputText bind-Valuecontext.Category placeholder不可为空50字以内 maxlength50RequiredValidator /StringLengthValidator Length50 //LgbInputTextSelect ItemsDefineItems TItemint bind-Valuecontext.Define/SelectLgbInputText bind-Valuecontext.Name placeholder不可为空50字以内 maxlength50RequiredValidator /StringLengthValidator Length50 //LgbInputTextLgbInputText bind-Valuecontext.Code placeholder不可为空2000字以内 maxlength2000RequiredValidator /StringLengthValidator Length2000 //LgbInputText/div/EditTemplate
/EditPageQueryBody 模板本组件模板负责提供查询过滤条件点击查询按钮后数据显示区域呈现符合过滤条件的数据记录本控件大量代码均已封装成通用仅需提供过滤条件即可LgbInputText bind-Valuecontext.Category maxlength50 /
Select ItemsQueryDefine TItemint bind-Valuecontext.Define /
LgbInputText bind-Valuecontext.Name maxlength50 /通过设置 bind-Value lambda 表达式自动生成一个 label 与 一个 input 控件极大的提高了代码编写速度TableHeader 模板本组件模板负责生成数据呈现 Table 的表头通过 TItem 设置绑定字段属性通过设置 bind-Value lambda 表达式自动生成汉字表头LgbTableHeader TItemstring bind-Valuecontext.Category/LgbTableHeader
LgbTableHeader TItemstring bind-Valuecontext.Name/LgbTableHeader
LgbTableHeader TItemstring bind-Valuecontext.Code/LgbTableHeader
LgbTableHeader TItemint bind-Valuecontext.Define/LgbTableHeaderRowTemplate 模板本组件负责呈现符合过滤条件的数据记录支持直接使用服务器端方法进行数据格式化tdcontext.Category/td
tdcontext.Name/td
tdcontext.Code/td
td(DefineItems.FirstOrDefault(d d.Value context.Define.ToString())?.Text ?? -)/tdEditTemplate 模板本组件负责数据的编辑功能通过设置 bind-Value 表达式实现双向绑定直接调用服务器端保存方法即可div classrowLgbInputText bind-Valuecontext.Category placeholder不可为空50字以内 maxlength50RequiredValidator /StringLengthValidator Length50 //LgbInputTextSelect ItemsDefineItems TItemint bind-Valuecontext.Define/SelectLgbInputText bind-Valuecontext.Name placeholder不可为空50字以内 maxlength50RequiredValidator /StringLengthValidator Length50 //LgbInputTextLgbInputText bind-Valuecontext.Code placeholder不可为空2000字以内 maxlength2000RequiredValidator /StringLengthValidator Length2000 //LgbInputText
/div通过简单的封装实现了仅需要提供数据属性 context.Name 即可组件自动会通过 [DisplayName] 标签或者通过系统服务的字典表中匹配到中文文字非常的方便Blazor 多 Tab 版通用权限控制系统演示网站ba.sdgxgz.com码云开源项目地址Bootstrap Admin目前仅仅完成了 字典表维护 页面的改版。其余页面等等批量更改原文链接https://www.cnblogs.com/argozhang/p/12022766.html.NET社区新闻深度好文欢迎访问公众号文章汇总 http://www.csharpkit.com
