詳解asp.net core封裝layui組件示例分享
更新時(shí)間：2017年10月09日 08:25:33 作者：易墨
本篇文章主要介紹了詳解asp.net core封裝layui組件示例分享，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
用什么封裝？這里只是用了TagHelper，是啥？自己瞅文檔去
在學(xué)習(xí)使用TagHelper的時(shí)候，最希望的就是能有個(gè)Demo能夠讓自己作為參考
- 怎么去封裝一個(gè)組件？
- 不同的情況怎么去實(shí)現(xiàn)？
- 有沒(méi)有更好更高效的方法？
找啊找啊找，最后跑去看了看mvc中的TagHelpers，再好好瞅了瞅TagHelper的文檔
勉強(qiáng)折騰了幾個(gè)組件出來(lái)，本來(lái)想一個(gè)組件一個(gè)組件寫(xiě)文章的，但是發(fā)現(xiàn)國(guó)慶已經(jīng)結(jié)束了~
效果預(yù)覽
代碼僅供參考,有不同的意見(jiàn)也忘不吝賜教
Checkbox復(fù)選框組件封裝
標(biāo)簽名稱：cl-checkbox
標(biāo)簽屬性： asp-for:綁定的字段，必須指定
- asp-items:綁定單選項(xiàng) 類型為：IEnumerable<SelectListItem>
- asp-skin:layui的皮膚樣式，默認(rèn)or原始
- asp-title:若只是一個(gè)復(fù)選框時(shí)顯示的文字，且未指定items，默認(rèn)Checkbox的值為true
其中在封裝的時(shí)候看源代碼發(fā)現(xiàn)兩段非常有用的代碼
1.判斷是否可以多選：
復(fù)制代碼 代碼如下:
var realModelType = For.ModelExplorer.ModelType; //通過(guò)類型判斷是否為多選 var _allowMultiple = typeof(string) != realModelType && typeof(IEnumerable).IsAssignableFrom(realModelType);
2.獲取模型綁定的列表值(多選的情況)
復(fù)制代碼 代碼如下:
var currentValues = Generator.GetCurrentValues(ViewContext,For.ModelExplorer,expression: For.Name,allowMultiple: true);
這3句代碼是在mvc自帶的SelectTagHelper中發(fā)現(xiàn)的.
因?yàn)閏ore其實(shí)已經(jīng)提供了非常多的TagHelper,比如常用的select就是很好的參考對(duì)象，封裝遇到問(wèn)題的時(shí)候去找找看指不定就又意外的收獲.
CheckboxTagHelper代碼
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace LayuiTagHelper.TagHelpers
{
/// <summary>
/// 復(fù)選框
/// </summary>
/// <remarks>
/// 當(dāng)Items為空時(shí)顯示單個(gè)，且選擇后值為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.默認(rèn);
[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 風(fēng)格
switch (Skin)
{
case CheckboxSkin.默認(rèn):
skin = "";
break;
case CheckboxSkin.原始:
skin = "primary";
break;
}
#endregion
#region 單個(gè)復(fù)選框
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 復(fù)選框組
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
{
默認(rèn),
原始
}
}
使用示例
@{
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="默認(rèn)"></cl-checkbox>
<cl-checkbox asp-for="Hobby3" asp-title="單個(gè)復(fù)選框"></cl-checkbox>
Radio單選框組件封裝
標(biāo)簽名稱：cl-radio
- 標(biāo)簽屬性： asp-for:綁定的字段，必須指定
- asp-items:綁定單選項(xiàng) 類型為：IEnumerable<SelectListItem>
太簡(jiǎn)單了，直接上代碼了
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>
最后再來(lái)一個(gè)開(kāi)關(guān)組件
單個(gè)復(fù)選框其實(shí)可以直接用開(kāi)關(guān)代替，恰巧layui中也有，于是也將開(kāi)關(guān)單獨(dú)的封裝了一下，代碼大同小異
就這個(gè) 
使用也簡(jiǎn)單： <cl-switch asp-for="Hobby4" asp-switch-text="開(kāi)啟|關(guān)閉"></cl-switch>
namespace LayuiTagHelper.TagHelpers
{
/// <summary>
/// 開(kāi)關(guān)
/// </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);
}
}
}
總結(jié)
封裝的還很粗糙，正常的使用是沒(méi)問(wèn)題的，若發(fā)現(xiàn)問(wèn)題，還望指出。
因?yàn)閘ayui是直接在頁(yè)面加載后渲染的表單標(biāo)簽，故沒(méi)有多少和layui相關(guān)的樣式。
除了一些表單組件之外，其實(shí)還對(duì)選項(xiàng)卡，時(shí)間軸，分頁(yè)，代碼顯示組件做了一些封裝，這些后面再介紹了。
當(dāng)然，有興趣的朋友可以先去一睹為快看看都實(shí)現(xiàn)了哪些組件
WeDemo分支clone命令:git clone https://git.coding.net/yimocoding/WeDemo.git -b LayuiTagHelper
選項(xiàng)卡，時(shí)間軸，分頁(yè)，代碼顯示等Demo打包下載
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Quartz是一個(gè)強(qiáng)大、開(kāi)源、輕量級(jí)的任務(wù)調(diào)度框架,支持cron-like表達(dá)式其他一些優(yōu)秀的特性。這篇文章主要介紹了Quartz在.NET中的使用,需要的朋友可以參考下2021-12-12
asp.net core下給網(wǎng)站做安全設(shè)置的方法詳解
這篇文章主要給大家介紹了關(guān)于asp.net core下給網(wǎng)站做安全設(shè)置的相關(guān)資料，文章通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
實(shí)現(xiàn)的關(guān)鍵：copy fbembed.dll icudt30.dll icuuc30.dll到system32文件夾下2008-12-12
ASP.NET MVC下自定義錯(cuò)誤頁(yè)和展示錯(cuò)誤頁(yè)的方式
這篇文章主要為大家詳細(xì)介紹了ASP.NET MVC下自定義錯(cuò)誤頁(yè)和展示錯(cuò)誤頁(yè)的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
ABP(ASP.NET Boilerplate)是基于ASP.NET的Web開(kāi)發(fā)框架,其在日志方面的功能非常強(qiáng)大,特別是審計(jì)跟蹤日志,下面我們就來(lái)進(jìn)行ABP框架中的日志功能完全解析2016-06-06
ASP.NET中用js取CheckBoxList中值的方法實(shí)例
用腳本取CheckBoxList中的值，并用"|"將其分開(kāi)，之后將取到的值放入文本框，返回?cái)?shù)據(jù)庫(kù)做添加或者修改2013-07-07
asp.net繼承IHttpHandler接口實(shí)現(xiàn)給網(wǎng)站圖片添加水印功能實(shí)例
這篇文章主要介紹了asp.net繼承IHttpHandler接口實(shí)現(xiàn)給網(wǎng)站圖片添加水印功能,實(shí)例分析了asp.net基于IHttpHandler接口實(shí)現(xiàn)網(wǎng)站圖片水印功能的具體步驟與相關(guān)技巧,需要的朋友可以參考下2016-07-07
實(shí)現(xiàn)基于事件通知的.Net套接字...2006-09-09
ASP.NET中為T(mén)extBox中添加calendar.js示例代碼
為T(mén)extBox中添加calendar.js對(duì)于一些新手朋友確實(shí)有點(diǎn)難度，下面為大家介紹下ASP.NET中具體的實(shí)現(xiàn)方法2013-11-11
在ASP.NET Core中用HttpClient發(fā)送POST, PUT和DELETE請(qǐng)求
這篇文章主要介紹了在ASP.NET Core中用HttpClient發(fā)送POST, PUT和DELETE請(qǐng)求的方法，幫助大家更好的理解和學(xué)習(xí)使用ASP.NET Core，感興趣的朋友可以了解下2021-03-03