asp.net core 패키지 layui 구성 요소 예제 공유

무엇으로 포장 합 니까?여 기 는 그냥 TagHelper 를 썼어 요.뭐 예요?스스로 문 서 를 보 러 가다.
TagHelper 를 배 울 때 가장 바 라 는 것 은 데모 가 자신 을 참고 할 수 있 도록 하 는 것 이다.

구성 요 소 를 어떻게 봉인 합 니까?

서로 다른 상황 을 어떻게 실현 합 니까?

더 좋 고 효율 적 인 방법 이 있 습 니까?

찾다 찾다 마지막 달 려 가서 보다 mvc 중TagHelpers다시 잘 보다TagHelper 문서
몇 개의 구성 요 소 를 겨우 괴 롭 혔 습 니 다.구성 요소 하나,구성 요소 하나 로 글 을 쓰 려 고 했 는데 국경일 이 끝 났 습 니 다~
데모 다운로드
효과 미리 보기

코드 는 참고 로 제공 할 뿐,다른 의견 이 있 더 라 도 아낌없이 가르쳐 주 는 것 을 잊 지 마 세 요.
체크 박스 체크 상자 구성 요소 패키지
태그 이름:cl-checkbox
태그 속성:asp-for:바 인 딩 된 필드 를 지정 해 야 합 니 다.

asp-items:바 인 딩 단일 옵션 유형:IEnumerable

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

이 세 개의 코드 는화면 음악 c 자체 SelectTagHelper에서 발견 되 었 다.
core 는 사실 이미 매우 많은 TagHelper 를 제 공 했 기 때 문 입 니 다.예 를 들 어 자주 사용 하 는 select 는 좋 은 참고 대상 입 니 다.포장 에 문제 가 생 겼 을 때 찾 아 보 세 요.
Checkbox TagHelper 코드

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

태그 속성:asp-for:바 인 딩 필드,지정 해 야 합 니 다

asp-items:바 인 딩 단일 옵션 유형:IEnumerable

너무 간단 해 요.바로 코드 를 넣 었 어 요.
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 분기 클론 명령:git clone https://git.coding.net/yimocoding/WeDemo.git -b LayuiTagHelper옵션,시간 축,페이지,코드 표시 등데모 패키지 다운로드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.