asp.netコアかみそりカスタムtaghelper

そしてtaghelper HTMLタグによって操作することができ、新たな用語（taghelper）は、条件付きの出力は、内部および外部の要素を追加して自由です。もちろん、それはASP-taghelperの最初の多くを構築しました。

次の資料ではtaghelperを達成するために、あなたとも簡単です。

カスタムHTML要素を作成します。

クラスを作成するButtonTagHelper

ラベル名のtagNameを、下のボタンのタグを作成します

 
 
  
  コピー
 
 
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace Ctrl.Core.Tag.Controls.Button
{
    [HtmlTargetElement("test-button")]
    public class ButtonTagHelper:TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "button";
            base.Process(context, output);
        }
    }
}

登録taghelper

作成後、すぐにそれを行う方法である-....、ASPリストの出現を、以下、このよう.cshtml内のラベルによってラベルASP-フォーム入力として、ああ、使用して行うことができないのですか？そのため、我々は_ViewImportsがプロジェクト作成時に、マイクロソフトは、当社の書面によるtaghelperライブラリMicrosoft.AspNetCore.Mvc.TagHelpersに導入しているが、先にtaghelperデフォルトの導入となっています。

当社のカスタムは、その後もこの方法に応じてカスタマイズtaghelperを導入する必要があり、ここで私は「Ctrl.Core.Tag」という名前のクラスライブラリを作成し、私は名前空間に直接導入された次のtaghelperのすべてを格納するために、このライブラリを持っています

 
 
  
  コピー
 
 
@addTagHelper *,Ctrl.Core.Tag

次の特定taghelperを紹介したい場合

 
 
  
  コピー
 
 
@addTagHelper 你的TagHelper , 命名空间

その後、我々のテストでは、プロジェクトに先生を見て利用可能で、その後、CSHTMLビューを見つけ、ちょうどプレフィックステストラベルだけで定義されて出てくる入力してください

プロジェクトを追加し、ラベルがあるかどうかを確認するために、新しく作成されたボタンを実行します

カスタム属性を追加します。

私たちの日常のニーズを満たすされていない上記の要件は、ここでは、要素の属性を定義します

 
 
  
  コピー
 
 
 output.Attributes.SetAttribute("class", "btn btn-primary");

そして、あなたは、クラス要素が追加されましたが表示されます、結果を見るためにページをめくります。

 
 
  
  コピー
 
 
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace Ctrl.Core.Tag.Controls.Button
{
    [HtmlTargetElement("test-button")]
    public class ButtonTagHelper:TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "button";
            output.Attributes.SetAttribute("class", "btn btn-primary");
            base.Process(context, output);
        }
    }
}

対マッチングボタンの種類によって知覚

上記は、当社のカスタムラベルを満たすことができますが、制限を使用することができ、ここで私はあなたのシナリオ思考を与えるだろう、それは後に自分自身を拡張することができます。

私は列挙CtrlButtonType用のクラスを作成しました

 
 
  
  コピー
 
 
namespace Ctrl.Core.Tag.Controls.Button
{
    /// <summary>
    ///     按钮类型
    /// </summary>
    public enum CtrlButtonType
    {
        /// <summary>
        ///  默认样式
        /// </summary>
        Default,
        /// <summary>
        ///     首选项
        /// </summary>
        Primary,
        /// <summary>
        ///      成功
        /// </summary>
        Success,
        /// <summary>
        ///  一般信息
        /// </summary>
        Info,
        /// <summary>
        ///  警告
        /// </summary>
        Warning,
        /// <summary>
        ///  危险
        /// </summary>
        Danger
    }
}

属性クラスを追加buttonTagHelper

 
 
  
  コピー
 
 
public CtrlButtonType ButtonType  { get; set; }

ただ、ページ、あなたはヒントがある見つけることCSHTMLプロパティを追加して、あなただけのボタンは非常にの側面ではありません。このことで、我々は持っているタイプを指定する対知覚のタイプによって定義されただけ列挙を見ることができます。

 
 
  
  コピー
 
 

namespace Ctrl.Core.Tag.Controls.Button
{
    [HtmlTargetElement("test-button")]
    public class ButtonTagHelper:TagHelper
    {
        public CtrlButtonType ButtonType  { get; set; }
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "button";
            output.Attributes.SetAttribute("class", "btn btn-"+ButtonType.ToString().ToLower());
            base.Process(context, output);
        }
    }
}

 
 
  
  コピー
 
 
 <test-button button-type="Success"></test-button>

asp.netコアかみそりカスタムtaghelper

おすすめ