详解asp.net core封装layui组件示例分享
用什么封装?这里只是用了TagHelper,是啥?自己瞅文档去 在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考
找啊找啊找,最后跑去看了看mvc中的TagHelpers,再好好瞅了瞅TagHelper的文档 勉强折腾了几个组件出来,本来想一个组件一个组件写文章的,但是发现国庆已经结束了~ Demo下载 效果预览 代码仅供参考,有不同的意见也忘不吝赐教 Checkbox复选框组件封装 标签名称:cl-checkbox 标签属性: asp-for:绑定的字段,必须指定
其中在封装的时候看源代码发现两段非常有用的代码 1.判断是否可以多选: 复制代码 代码如下: var realModelType = For.ModelExplorer.ModelType; //通过类型判断是否为多选 var _allowMultiple = typeof(string) != realModelType && typeof(IEnumerable).IsAssignableFrom(realModelType); 2.获取模型绑定的列表值(多选的情况) 复制代码 代码如下: var currentValues = Generator.GetCurrentValues(ViewContext,For.ModelExplorer,expression: For.Name,allowMultiple: true); 这3句代码是在mvc自带的SelectTagHelper中发现的. 因为core其实已经提供了非常多的TagHelper,比如常用的select就是很好的参考对象,封装遇到问题的时候去找找看指不定就又意外的收获. CheckboxTagHelper代码 using System.Collections.Generic; using Microsoft.AspNetCore.Mvc.Rendering; using Microsoft.AspNetCore.Mvc.ViewFeatures; using Microsoft.AspNetCore.Razor.TagHelpers; namespace LayuiTagHelper.TagHelpers { /// <summary> /// 复选框 /// </summary> /// <remarks> /// 当Items为空时显示单个,且选择后值为true /// </remarks> [HtmlTargetElement(CheckboxTagName)] public class CheckboxTagHelper : TagHelper { private const string CheckboxTagName = "cl-checkbox"; private const string ForAttributeName = "asp-for"; private const string ItemsAttributeName = "asp-items"; private const string SkinAttributeName = "asp-skin"; private const string SignleTitleAttributeName = "asp-title"; protected IHtmlGenerator Generator { get; } public CheckboxTagHelper(IHtmlGenerator generator) { Generator = generator; } [ViewContext] public ViewContext ViewContext { get; set; } [HtmlAttributeName(ForAttributeName)] public ModelExpression For { get; set; } [HtmlAttributeName(ItemsAttributeName)] public IEnumerable<SelectListItem> Items { get; set; } [HtmlAttributeName(SkinAttributeName)] public CheckboxSkin Skin { get; set; } = CheckboxSkin.默认; [HtmlAttributeName(SignleTitleAttributeName)] public string SignleTitle { get; set; } public override void Process(TagHelperContext context,TagHelperOutput output) { //获取绑定的生成的Name属性 string inputName = ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(For?.Name); string skin = string.Empty; #region 风格 switch (Skin) { case CheckboxSkin.默认: skin = ""; break; case CheckboxSkin.原始: skin = "primary"; break; } #endregion #region 单个复选框 if (Items == null) { output.TagName = "input"; output.TagMode = TagMode.SelfClosing; output.Attributes.Add("type","checkbox"); output.Attributes.Add("id",inputName); output.Attributes.Add("name",inputName); output.Attributes.Add("lay-skin",skin); output.Attributes.Add("title",SignleTitle); output.Attributes.Add("value","true"); if (For?.Model?.ToString().ToLower() == "true") { output.Attributes.Add("checked","checked"); } return; } #endregion #region 复选框组 var currentValues = Generator.GetCurrentValues(ViewContext,allowMultiple: true); foreach (var item in Items) { var checkbox = new TagBuilder("input"); checkbox.TagRenderMode = TagRenderMode.SelfClosing; checkbox.Attributes["type"] = "checkbox"; checkbox.Attributes["id"] = inputName; checkbox.Attributes["name"] = inputName; checkbox.Attributes["lay-skin"] = skin; checkbox.Attributes["title"] = item.Text; checkbox.Attributes["value"] = item.Value; if (item.Disabled) { checkbox.Attributes.Add("disabled","disabled"); } if (item.Selected || (currentValues != null && currentValues.Contains(item.Value))) { checkbox.Attributes.Add("checked","checked"); } output.Content.AppendHtml(checkbox); } output.TagName = ""; #endregion } } public enum CheckboxSkin { 默认,原始 } } 使用示例 @{ string sex="男"; var Items=new List<SelectListItem>() { new SelectListItem() { Text = "男",Value = "男" },new SelectListItem() { Text = "女",Value = "女"},new SelectListItem() { Text = "不详",Value = "不详",Disabled=true } }; } <cl-checkbox asp-items="Model.Items" asp-for="Hobby1" asp-skin="默认"></cl-checkbox> <cl-checkbox asp-for="Hobby3" asp-title="单个复选框"></cl-checkbox> Radio单选框组件封装 标签名称:cl-radio
太简单了,直接上代码了 RadioTagHelper代码 using System; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc.Rendering; using Microsoft.AspNetCore.Mvc.ViewFeatures; using Microsoft.AspNetCore.Razor.TagHelpers; namespace LayuiTagHelper.TagHelpers { /// <summary> /// 单选框 /// </summary> [HtmlTargetElement(RadioTagName)] public class RadioTagHelper : TagHelper { private const string RadioTagName = "cl-radio"; private const string ForAttributeName = "asp-for"; private const string ItemsAttributeName = "asp-items"; [ViewContext] public ViewContext ViewContext { get; set; } [HtmlAttributeName(ForAttributeName)] public ModelExpression For { get; set; } [HtmlAttributeName(ItemsAttributeName)] public IEnumerable<SelectListItem> Items { get; set; } public override void Process(TagHelperContext context,TagHelperOutput output) { if (For == null) { throw new ArgumentException("必须绑定模型"); } foreach (var item in Items) { var radio = new TagBuilder("input"); radio.TagRenderMode = TagRenderMode.SelfClosing; radio.Attributes.Add("id",ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(For.Name)); radio.Attributes.Add("name",ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(For.Name)); radio.Attributes.Add("value",item.Value); radio.Attributes.Add("title",item.Text); radio.Attributes.Add("type","radio"); if (item.Disabled) { radio.Attributes.Add("disabled","disabled"); } if (item.Selected || item.Value == For.Model?.ToString()) { radio.Attributes.Add("checked","checked"); } output.Content.AppendHtml(radio); } output.TagName = ""; } } } 使用示例 @{ string sex="男"; var Items=new List<SelectListItem>() { new SelectListItem() { Text = "男",Disabled=true } }; } <cl-radio asp-items="@Items" asp-for="sex"></cl-radio> 最后再来一个开关组件 单个复选框其实可以直接用开关代替,恰巧layui中也有,于是也将开关单独的封装了一下,代码大同小异 就这个 使用也简单: namespace LayuiTagHelper.TagHelpers { /// <summary> /// 开关 /// </summary> [HtmlTargetElement(SwitchTagName)] public class SwitchTagHelper : TagHelper { private const string SwitchTagName = "cl-switch"; private const string ForAttributeName = "asp-for"; private const string SwitchTextAttributeName = "asp-switch-text"; protected IHtmlGenerator Generator { get; } public SwitchTagHelper(IHtmlGenerator generator) { Generator = generator; } [ViewContext] public ViewContext ViewContext { get; set; } [HtmlAttributeName(ForAttributeName)] public ModelExpression For { get; set; } [HtmlAttributeName(SwitchTextAttributeName)] public string SwitchText { get; set; } = "ON|OFF"; public override void Process(TagHelperContext context,TagHelperOutput output) { string inputName = ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(For?.Name); output.TagName = "input"; output.TagMode = TagMode.SelfClosing; if (For?.Model?.ToString().ToLower() == "true") { output.Attributes.Add("checked","checked"); } output.Attributes.Add("type","checkbox"); output.Attributes.Add("id",inputName); output.Attributes.Add("name",inputName); output.Attributes.Add("value","true"); output.Attributes.Add("lay-skin","switch"); output.Attributes.Add("lay-text",SwitchText); } } } 总结 封装的还很粗糙,正常的使用是没问题的,若发现问题,还望指出。 因为layui是直接在页面加载后渲染的表单标签,故没有多少和layui相关的样式。 除了一些表单组件之外,其实还对选项卡,时间轴,分页,代码显示组件做了一些封装,这些后面再介绍了。 当然,有兴趣的朋友可以先去一睹为快看看都实现了哪些组件 仓库地址 WeDemo分支clone命令: 选项卡,时间轴,分页,代码显示等Demo打包下载 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- asp.net-mvc – 数据注释真的是一个好主意验证吗?
- asp.net – 实体框架4 – 从模型更新数据库模式 不擦拭表数
- asp.net-mvc – asp.net mvc url action忽略旧参数值
- asp.net实现access数据库分页的方法
- asp.net – 为什么事件冒泡,为什么不直接订阅click事件?
- ASP.NET UpdatePanel和Javascript __dopostback
- ASP.NET新手:Webforms与MVC2
- asp.net-core – project.json中的框架和导入部分:它们是什
- asp.net-mvc – Viewmodel和动态菜单最佳实践 – ASP.NET M
- asp.net-mvc-2 – 隐藏字段作为ASP.NET MVC2应用程序中的(重
- asp.net – 如何更改AjaxControlToolkit HtmlEdi
- ASP.NET MVC 3 Razor:初始化一个JavaScript数组
- 如何在ASP.NET MVC中获取当前虚拟路径?
- asp.net-mvc-4 – 如何在MVC 4中每3秒刷新一次局
- .net – appSettings等效于applicationSettings的
- asp.net-mvc – .NET MVC MultiSelectList和选定
- bin文件中的任何文件是否有任何更改会导致ASP.NE
- unit-testing – 对ActionFilter进行单元测试 –
- 如何解决.Net中冲突的程序集?
- asp.net – 返回按钮刷新页面