本文主要介绍了详解asp.net core封装layui组件示例分享，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
用什么封装？这里只是用了taghelper，是啥？自己瞅文档去
在学习使用taghelper的时候，最希望的就是能有个demo能够让自己作为参考
怎么去封装一个组件？
不同的情况怎么去实现？
有没有更好更高效的方法？
找啊找啊找，最后跑去看了看mvc中的taghelpers，再好好瞅了瞅taghelper的文档
勉强折腾了几个组件出来，本来想一个组件一个组件写文章的，但是发现国庆已经结束了~
demo下载
效果预览
代码仅供参考,有不同的意见也忘不吝赐教
checkbox复选框组件封装
标签名称：cl-checkbox
标签属性： asp-for:绑定的字段，必须指定
asp-items:绑定单选项 类型为：ienumerable90fc9151e669273219504e6e41f84252
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中也有，于是也将开关单独的封装了一下，代码大同小异
就这个
使用也简单： <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相关的样式。
除了一些表单组件之外，其实还对选项卡，时间轴，分页，代码显示组件做了一些封装，这些后面再介绍了。
当然，有兴趣的朋友可以先去一睹为快看看都实现了哪些组件
仓库地址
wedemo分支clone命令:git clone https://git.coding.net/yimocoding/wedemo.git -b layuitaghelper
选项卡，时间轴，分页，代码显示等demo打包下载
相关推荐：
layui分页和layui laypage分页区别详解
layui实现选项卡效果代码分享
jquerylayui常用方法实例分享
以上就是详解asp.net core封装layui组件的详细内容。