欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 21:03:21
用什么封装?这里只是用了taghelper,是啥?自己瞅文档去 在学习使用taghelper的时候,最希望的就是能有个demo能够让自己作为参考 怎么去封装一个...

用什么封装?这里只是用了taghelper,是啥?自己瞅文档去

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

  • 怎么去封装一个组件?
  • 不同的情况怎么去实现?
  • 有没有更好更高效的方法?

找啊找啊找,最后跑去看了看mvc中的taghelpers,再好好瞅了瞅taghelper的文档

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

demo下载

效果预览

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

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

checkbox复选框组件封装

标签名称:cl-checkbox

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

  1. asp-items:绑定单选项 类型为:ienumerable<selectlistitem>
  2. asp-skin:layui的皮肤样式,默认or原始
  3. asp-title:若只是一个复选框时显示的文字,且未指定items,默认checkbox的值为true

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

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

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

就这个 详解asp.net core封装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打包下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。