ASP.NET核心包layui组件示例分享详解

用什么包装？它只是一个标记助手。这是什么？自己看文件

在学习使用TagHelper的时候，最希望的就是有一个可以作为参考的Demo

如何打包一个组件？如何达到不同的情况？有没有更好更高效的方法？我搜索了又搜索，最后跑去看mvc中的taghelper，然后好好看看taghelper的文档

我不情愿地扔掉了几个组件。本来想一篇一篇写文章，结果发现国庆结束了~

演示下载

效果预览

代码仅供参考，有不同意见可以忘记提建议

复选框组件的包

标签名称：cl-复选框

标签属性：asp-for:绑定字段，必须指定

asp-items:的绑定选项类型为：ienumerableselectitemsasp-skin : layui的皮肤样式，默认为或原asp-title:如果当未指定复选框时，项目只是显示文本，则默认复选框值为真

其中，打包时查看源代码，找到两个非常有用的代码

1.判断你是否可以选择多个选项：

复制的代码代码如下：VAR真实模型类型=for。模型资源管理器。型号；//通过var _ allowmultiple=type of(字符串)判断是否多选！=realmode type type of(IEnumerable)。IsAssignableFrom(realmode type)；

2.获取模型绑定的列表值(如果有多个选择)

复制代码如下： var CurrentValues=generator . getcurrentvalues(查看上下文，对于。模型资源管理器，表达式：name，allow multiple : true)；

这三个代码可以在mvc附带的SelectTagHelper中找到。

事实上，core已经提供了很多TagHelper。例如，常用的select就是一个很好的参考对象。当包装遇到问题时，寻找它们是意想不到的。

CheckboxTagHelper代码

使用系统。集合。通用；使用微软AspNetCore。Mvc。翻译使用微软AspNetCore。Mvc。查看功能使用微软。剃刀。标签助手；命名空间LayuiTagHelper .taghelper {///summary///复选框////摘要///备注///当项目为空时显示单个，且选择后值为true/备注[html targetelement(复选框标记名)]公共类checkbox TagHelper : TagHelper { private const string checkbox标记名=' cl-checkbox '；for attributename=' ASP-for '的私有常量字符串；private const string ITEMS ATTRIBUTE name=' ASP-ITEMS '；私人警察字符串SkinAttributeNAmE=' ASP-skin '；私人警察字符串signetitleattributename=' ASP-title '；受保护的ihtmlgelegenerator生成器{ get } public checkbox taghelper(ihtmlgelegenerator Generator Generator){ Generator=Generator；}[ViewContext]public ViewContext ViewContext { get；设置；}[html attributename(ForTattributename)]{ get；设置；}[html attributename(Items attributename)]public IEnumerableSelectListItem Items { get；设置；}[html attributename(SkinAttributename)]公共复选框皮肤皮肤{获取设置；}=CheckboxSkin .默认；[html attributename(SignletitLeattributename)]公共字符串SignleTitle { get设置；}公共覆盖作废流程(TagHelperContext上下文，TagHelperOutput输出){ //获取绑定的生成的名字属性字符串inputName=ViewContext .查看数据。模板信息。获取完整的超文本标记语言字段名称（用于？名称);字符串外观=字符串。空的；#地区风格开关（皮肤){大小写检查框皮肤。默认：皮肤=' ';打破；案例检查框皮肤.原始：皮肤='主要打破；} #endregion #region单个复选框if(Items==null){ 0输出。标记名='输入输出。标记模式=标记模式。自动关闭；输出。属性。添加('类型','复选框');输出。属性。添加(' id '，InputName)；输出。属性。添加(' name '，input name)；输出。属性。添加('皮肤层，皮肤);输出。属性。添加('标题，签名标题)；输出。属性。添加('值','真');如果（对于？模特？ToString().toLower()==' true '){ 0输出。属性。添加('选中','选中');}返回；} #endregion #region复选框组可变电流值=发生器. GetCurrentValues(视图上下文为了.ModelExplorer，expression: For .Name，allow multiple : true)；foreach(项目中的定义变量项目){ var复选框=新标记生成器('输入');复选框TagRenderMode=TagRenderMode .自动关闭；复选框。属性[' type ']=' checkbox '；复选框。属性[' id ']=InputName；复选框。属性[' name ']=InputName；复选框。属性[' lay-skin ']=skin；复选框。属性['title']=项目。文字；复选框。属性['值']=项目。价值；如果(项目。已禁用){复选框。属性。添加('禁用','禁用');}如果(项。选中||(当前值！=空电流值.包含（项。值))){复选框。属性。添加('选中','选中');}输出内容。AppendHtml(复选框);}输出。标记名=' ';#endregion } }公共枚举CheckboxSkin {默认，原始}}使用示例

@{string sex='男；var Items=新列表SelectListItem(){新的SelectListItem(){ Text='男，值='男},新的SelectListItem() { Text='女，值='女},新的SelectListItem() { Text='不详，值='不详，Disabled=true } }} cl-复选框asp-items='Model .项目" ASP-for="爱好1"ASP-skin="默认/cl-checkbox cl-checkbox ASP-for=' Hobby3 ' ASP-title='单个复选框/cl-CheckBox收音机单选框组件封装

标签名称：cl-收音机

标签属性：asp-for:绑定的字段，必须指定asp-items:绑定单选项类型为：IEnumerableSelectListItem太简单了，直接上代码了

无线助手代码

使用系统；使用系统。集合。通用；使用微软AspNetCore。Mvc。翻译使用微软AspNetCore。Mvc。查看功能使用微软。剃刀。标签助手；命名空间LayuiTagHelper .taghelper {///summary///单选框////摘要[html targetelement(rate tagname)]公共类ratettaghelper : tagHelper { private const string ratettagname=' cl-radio '；for attributename=' ASP-for '的私有常量字符串；private const string ITEMS ATTRIBUTE name=' ASP-ITEMS '；[ViewContext]public ViewContext ViewContext { get；设置；}[html attributename(ForTattributename)]{ get；设置；}[html attributename(Items attributename)]public IEnumerableSelectListItem Items { get；设置；}公共重写作废流程(TagHelperContext上下文，TagHelperOutput输出){如果(For==null)}抛出新的ArgumentException(“”必须绑定模型');} foreach(项目中的定义变量项目){ var radio=新标签生成器(' input ')；无线电TagRenderMode=TagRenderMode .自动关闭；无线电。属性。添加(“id”，视图上下文。视图数据。姓名));无线电。属性。添加('名称，视图上下文。视图数据。姓名));无线电。属性。添加('值，项目。价值);无线电。属性。添加('标题，项目。文本);无线电。属性。添加(“type”，“radio”)；如果(项目。禁用){收音机。属性。添加('禁用','禁用');}如果(项。所选||项目。值==对于.模特？ToString()) { radio .属性。添加('选中','选中');}输出内容。AppendHtml(单选);}输出。标记名=' ';} }}使用示例

@{string sex='男；var Items=新列表SelectListItem(){新的SelectListItem(){ Text='男，值='男},新的SelectListItem() { Text='女，值='女},新的SelectListItem() { Text='不详，值='不详，Disabled=true } } } cl-radio ASP-Items=' @ Items ' ASP-for=' sex '/cl-radio最后再来一个开关组件

单个复选框其实可以直接用开关代替，恰巧layui中也有，于是也将开关单独的封装了一下，代码大同小异

就这个

使用也简单：cl-switch ASP-for=' Hobby4 ' ASP-switch-text='开启|关闭/cl-开关

命名空间LayuiTagHelper .taghelper {///summary///开关////摘要[html targetelement(开关标记名)]公共类switch tag helper : tag helper { private const string switch标记名=' cl-switch '；for attributename=' ASP-for '的私有常量字符串；私有常量字符串SwitchTextAttributeNAmE=' ASP-Switch-text '；受保护的ihtmlgelegenerator生成器{ get}公共switch taghelper(ihtmlgelegenerator Generator){ Generator=Generator；}[ViewContext]public ViewContext ViewContext { get；设置；}[html attributename(ForTattributename)]{ get；设置；}[HTML属性名(SwitChTextAttributeName)]公共字符串SwitchText { get设置；}="开|关";公共覆盖作废流程(TagHelperContext上下文，TagHelperOutput输出){ string inputName=ViewContext .查看数据。模板信息。获取完整的超文本标记语言字段名称（用于？名称);输出。标记名='输入输出。标记模式=标记模式。自动关闭；如果（对于？模特？ToString().toLower()==' true '){ 0输出。属性。添加('选中','选中');}输出。属性。添加('类型','复选框');输出。属性。添加(' id '，InputName)；输出。属性。添加(' name '，input name)；输出。属性。添加('值','真');输出。属性。添加('皮肤层','开关');输出。属性。添加(“lay-text”，切换文本)；} }}总结

封装的还很粗糙，正常的使用是没问题的，若发现问题，还望指出。

因为layui是直接在页面加载后渲染的表单标签，故没有多少和layui相关的样式。

除了一些表单组件之外，其实还对选项卡，时间轴，分页，代码显示组件做了一些封装，这些后面再介绍了。

当然，有兴趣的朋友可以先去一睹为快看看都实现了哪些组件

仓库地址

WeDemo分支克隆命令： git clone https://git.coding.net/yimocoding/WeDemo.git-b layuitag帮助程序

打包并下载演示，如标签、时间线、分页和代码显示

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。