지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 백엔드 개발 > C#.Net 튜토리얼 > Layui 구성 요소를 캡슐화하는 asp.net 코어의 자세한 예

Layui 구성 요소를 캡슐화하는 asp.net 코어의 자세한 예

黄舟
풀어 주다： 2017-10-11 10:23:52
원래의
3642명이 탐색했습니다.

이 글은 주로 asp.net 코어 캡슐화된 Layui 구성 요소 예제 공유에 대한 자세한 설명을 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 어떤 패키지를 사용해야 하는지 살펴보겠습니다. 여기서는 TagHelper가 방금 사용되었습니다. 그게 무엇인가요? 문서를 직접 읽어보세요

TagHelper 사용법을 배울 때 가장 바라는 것은 참조로 사용할 수 있는 데모를 갖는 것입니다

    구성 요소를 어떻게 캡슐화하나요?

    • 다양한 상황을 어떻게 구현하나요?

    • 더 좋고 효율적인 방법이 있나요?

    • 찾고 찾아보고 결국 mvc에 있는 TagHelpers를 살펴보고 TagHelper 문서를 잘 살펴보았습니다


원래는 몇 가지 컴포넌트를 만지작거려서 원래는 하나씩 글을 쓰고 싶었습니다. 그런데 국경일이 끝났다는 걸 알게 됐어요~

데모 다운로드

효과 미리보기

코드는 참고용일 뿐입니다. 다른 의견이 있으면 언제든지 알려주시기 바랍니다

체크박스 체크박스 구성요소 package


태그 이름: cl -checkbox


태그 속성: asp-for: 바인딩된 필드, 지정해야 함

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

    2. asp- skin:layui 스킨 스타일 , 기본값 또는 원본

    3. asp-title: 체크박스 사용 시 표시되는 텍스트일 뿐이고 항목이 지정되지 않은 경우 체크박스 기본 값은 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);
로그인 후 복사
이 세 줄의 코드는 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


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

    2. asp-items: The 바인딩 단일 옵션 유형은 다음과 같습니다. IEnumerable

    3. 너무 간단합니다. 직접적으로 코드가 표시됩니다.

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="Open|Close">&lt ;/cl-switch></p>

<cl-switch asp-for="Hobby4" asp-switch-text="开启|关闭"></cl-switch><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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
asp.net core layui
원천：php.cn
이전 기사：ASP.NET Core에서 사용자 로그인 확인을 위한 최소 구성을 구현하는 샘플 코드 다음 기사：Word 텍스트 및 그림 하이퍼링크를 추가하는 C# 메서드
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
사용자 정의 PHP 페이지에 배치할 WordPress 사진' 값을 검색합니다. 기존 HTML(특히 asp.net 웹사이트)에서 WordPress 웹사이트를 만들어야 하므로 다음을 사용하여 템플릿을 만들고 PHP 페이지를 대상으로 지정합니다....
에서 2024-04-02 19:13:12
0
1
296
JavaScript 및 jQuery를 사용하여 ASP.NET MVC의 Kendo Grid 선택 열에서 특정 행의 선택을 취소합니다. 단계별 가이드 ASP.NETMVC5 프로젝트에 KendoGrid가 있습니다. 열 중 하나가 선택 열이고 특정 조건을 충족하면 확인란의 선택을 취소해 보겠습니다. 확인란을 선택 ...
에서 2024-03-30 17:18:30
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿