asp.net core封裝layui組件的樣本詳解

本篇文章主要介紹了詳解asp.net core封裝layui組件樣本分享，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

用什麼封裝？這裡只是用了TagHelper，是啥？自己瞅文檔去

在學習使用TagHelper的時候，最希望的就是能有個Demo能夠讓自己作為參考

• 怎麼去封裝一個組件？

• 不同的情況怎麼去實現？

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

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

勉強折騰了幾個組件出來，本來想一個組件一個組件寫文章的，但是發現國慶已經結束了~

Demo下載

效果預覽

代碼僅供參考,有不同的意見也忘不吝賜教

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

總結

封裝的還很粗糙，正常的使用是沒問題的，若發現問題，還望指出。

因為layui是直接在頁面載入後渲染的表單標籤，故沒有多少和layui相關的樣式。

除了一些表單組件之外，其實還對選項卡，時間軸，分頁，代碼顯示組件做了一些封裝，這些後面再介紹了。

當然，有興趣的朋友可以先去一睹為快看看都實現了哪些組件