怎么在asp.net中封装一个layui组件

本篇文章为大家展示了怎么在asp.net中封装一个layui组件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

Checkbox复选框组件封装

标签名称：cl-checkbox

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

1. asp-items:绑定单选项 类型为：IEnumerable<SelectListItem>

2. asp-skin:layui的皮肤样式，默认or原始

3. asp-title:若只是一个复选框时显示的文字，且未指定items，默认Checkbox的值为true

其中在封装的时候看源代码发现两段非常有用的代码

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,For.ModelExplorer,expression: For.Name,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

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

2. asp-items:绑定单选项 类型为：IEnumerable<SelectListItem>

太简单了，直接上代码了

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 = "男", Value = "男" },     new SelectListItem() { Text = "女", Value = "女"},     new SelectListItem() { Text = "不详", Value = "不详",Disabled=true }    }; } <cl-radio asp-items="@Items" asp-for="sex"></cl-radio>

最后再来一个开关组件

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

就这个 

使用也简单： <cl-switch asp-for="Hobby4" asp-switch-text="开启|关闭"></cl-switch>


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);   }  } }

上述内容就是怎么在asp.net中封装一个layui组件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。