Lauiui コンポーネントをカプセル化する asp.net コアの詳細な例

この記事では、asp.net core のカプセル化されたlayui コンポーネントの共有例の詳細な説明を主に紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。エディターに従って、どのパッケージを使用すればよいか見てみましょう。ここでは TagHelper が使用されていますが、これは何ですか?自分でドキュメントを読んでください

TagHelper の使い方を学ぶとき、私が最も望むのは、リファレンスとして使用できるデモがあることです

コンポーネントをカプセル化するにはどうすればよいですか?
さまざまな状況を実装するにはどうすればよいですか?
もっと良い、より効率的な方法はありますか?
検索して検索して、最終的には mvc の TagHelpers を調べてから、TagHelper のドキュメントをよく調べました

もともと記事を書こうと思っていたいくつかのコンポーネントを仕方なくいじってみました。しかし、建国記念日は終わったことがわかりました~

デモのダウンロード

エフェクトのプレビュー

このコードは参考用です。異なる意見がある場合は、お気軽に教えてください

チェックボックスチェックボックスコンポーネント。 package

タグ名: cl -checkbox

タグ属性: asp-for: バインドされたフィールド、指定する必要があります

asp-items: バインディング単一オプションのタイプ: IEnumerable<SelectListItem>
asp -skin:layui スキン スタイル、デフォルトまたはオリジナル
asp-title: チェック ボックスが使用されたときに表示される単なるテキストであり、項目が指定されていない場合、デフォルトのチェック ボックスの値は true です

、これはカプセル化するときにソース コードを見るときに見つかります。 2 つの非常に便利なコード部分

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 に含まれています

なぜなら、コアは実際に一般的に使用される select など、多くの TagHelper が提供されています。これは優れた参照オブジェクトであり、問​​題が発生したときに検索すると、予期しない結果が得られる可能性があります。 example

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
 {
  默认,
  原始
 }
}

ラジオラジオボタンコンポーネントパッケージ

タグ名: cl-radio

タグ属性: asp-for: バインドされたフィールドを指定する必要があります

asp-items:バインディングの単一オプションのタイプは次のとおりです: IEnumerable<SelectListItem>

直接的には単純すぎます

1. RadioTagHelperコード

2. @{
   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>

使用例

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 = "";
  }
 }
}

最後に、スイッチコンポーネント

実際、単一のチェックボックスをスイッチに直接置き換えることができます。スイッチはたまたまlayuiでも利用可能です。そのため、スイッチは個別にカプセル化されており、コードは似ています

これだけです

また、使い方は簡単: &lt;cl-switch asp-for="Hobby4" asp-switch-text="Open|Close"&gt;&lt;/cl-switch&gt;<p>

@{
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>

概要

梱包はまだ非常に粗雑ですが、通常の使用には問題ありません、問題が見つかった場合は、ご指摘ください。 &lt;cl-switch asp-for=&quot;Hobby4&quot; asp-switch-text=&quot;开启|关闭&quot;&gt;&lt;/cl-switch&gt;<br>

layui はページが読み込まれた直後にレンダリングされるフォームタグであるため、layui に関連するスタイルはあまりありません。

いくつかのフォームコンポーネントに加えて、実際にはタブ、タイムライン、ページング、および後で紹介するコード表示コンポーネントもカプセル化されます。

もちろん、興味のある友人は、どのようなコンポーネントが実装されているかを簡単に確認することができます

以上がLauiui コンポーネントをカプセル化する asp.net コアの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。