asp.net core封装layui组件的示例详解

用什么封装？这里只是用了TagHelper，是啥？自己瞅文档去

在学习使用TagHelper的时候，最希望的就是能有个Demo能够让自己作为参考

• 怎么去封装一个组件？

• 不同的情况怎么去实现？

• 有没有更好更高效的方法？

勉强折腾了几个组件出来，本来想一个组件一个组件写文章的，但是发现国庆已经结束了~

Demo下载

效果预览

代码仅供参考,有不同的意见也忘不吝赐教

Checkbox复选框组件封装

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

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

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

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

复制代码 代码如下:

var realModelType = For.ModelExplorer.ModelType; //通过类型判断是否为多选   var _allowMultiple = typeof(string) != realModelType && typeof(IEnumerable).IsAssignableFrom(realModelType);

复制代码 代码如下:

var currentValues = Generator.GetCurrentValues(ViewContext,For.ModelExplorer,expression: For.Name,allowMultiple: true);

因为core其实已经提供了非常多的TagHelper,比如常用的select就是很好的参考对象，封装遇到问题的时候去找找看指不定就又意外的收获.

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>

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

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

太简单了，直接上代码了

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 core封装layui组件的示例详解的详细内容，更多内容请关注技术你好其它相关文章！