이 글은 주로 asp.net 코어 캡슐화된 Layui 구성 요소 예제 공유에 대한 자세한 설명을 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 어떤 패키지를 사용해야 하는지 살펴보겠습니다. 여기서는 TagHelper가 방금 사용되었습니다. 그게 무엇인가요? 문서를 직접 읽어보세요
TagHelper 사용법을 배울 때 가장 바라는 것은 참조로 사용할 수 있는 데모를 갖는 것입니다
원래는 몇 가지 컴포넌트를 만지작거려서 원래는 하나씩 글을 쓰고 싶었습니다. 그런데 국경일이 끝났다는 걸 알게 됐어요~
데모 다운로드
효과 미리보기
코드는 참고용일 뿐입니다. 다른 의견이 있으면 언제든지 알려주시기 바랍니다
체크박스 체크박스 구성요소 package
태그 이름: cl -checkbox
태그 속성: asp-for: 바인딩된 필드, 지정해야 함
, 캡슐화할 때 소스 코드를 볼 때 발견되는 매우 유용한 두 가지 코드 조각
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);
이 세 줄의 코드는 mvc와 함께 제공되는 SelectTagHelper에서 발견되었습니다.
core가 실제로 제공하기 때문입니다. 일반적으로 사용되는 select와 같은 많은 TagHelper는 좋은 참조 개체이며 문제가 있을 때 찾아보면 예상치 못한 결과를 얻을 수 있습니다.
CheckboxTagHelper code
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>
태그 이름: cl-radio
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에서도 가능하기 때문에 스위치를 별도로 캡슐화하여 코드도 비슷합니다
이것만으로도
역시 간단합니다 사용 방법: bed1dac0eb9c3735100bd7d0a7c28c95< ;/cl-switch>
b7502faa7a2dcf16c9a76205093d749bd6e4618ca9b2fd042e132fdca13ef340<br>
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는 페이지 로딩 후 바로 렌더링되는 form 태그이기 때문에layui와 관련된 스타일은 많지 않습니다.
일부 양식 구성 요소 외에도 나중에 소개될 탭, 타임라인, 페이징 및 코드 표시 구성 요소도 캡슐화합니다.
물론, 관심 있는 친구들은 어떤 구성요소가 구현되었는지 먼저 살펴보세요
위 내용은 Layui 구성 요소를 캡슐화하는 asp.net 코어의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!