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

概述asp.net core封装layui组件的示例详解 本篇文章主要介绍了详解asp.net core封装layui组件示例分享，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

怎么去封装一个组件？

不同的情况怎么去实现？

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

找啊找啊找，最后跑去看了看mvc中的TagHelpers，再好好瞅了瞅TagHelper的文档

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

Demo下载

效果预览

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

CheckBox复选框组件封装

标签名称：cl-checkBox

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

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

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

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

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

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中也有，于是也将开关单独的封装了一下，代码大同小异

就这个

使用也简单： @H_301_154@<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);  } }}

总结

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

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

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

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

以上是内存溢出为你收集整理的asp.net core封装layui组件的示例详解全部内容，希望文章能够帮你解决asp.net core封装layui组件的示例详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。