又一個新的名詞(taghelper),通過taghelper是可以操作html標籤、條件輸出、更是自由新增內外元素。當然也內建了挺多的asp-開頭的taghelper。

下面文章中也簡單的帶大家實現一個taghelper;

建立自定義html元素

建立一個類ButtonTagHelper

tagName為標籤名稱,下面建立一個button標籤

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

建立完後可沒法執行使用哦,在.cshtml通過某個標籤比如form標籤輸入asp-,下面立刻就出現了一個列表 asp-.... ,這些是怎麼做到的呢？因為在_ViewImports在我們建立專案工程時,已經提前引入了taghelper預設引入的是微軟已經為我們寫好的taghelper類庫Microsoft.AspNetCore.Mvc.TagHelpers;

我們自定義的話也需要按照這個方式引入自定義的taghelper,下面我自己建立了一個類庫名字為"Ctrl.Core.Tag",我這個類庫下面要存放所有的taghelper 我直接引入名稱空間

@addTagHelper *,Ctrl.Core.Tag
 

如果想引入特定的taghelper如下

@addTagHelper 你的TagHelper , 名稱空間

然後我們測試一下是否可用了,先生成一下專案,然後找個cshtml檢視,輸入剛才的字首test會出來剛才定義的標籤

新增上並執行專案檢視剛才建立的button標籤是否存在

新增自定義屬性

上面需求是滿足不了我們日常需求的,下面我們再定義一個元素屬性

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

然後再開啟頁面看效果就會看到class元素已經給加上了.

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

 

通過vs感知匹配按鈕型別

上面能滿足我們自定義標籤了,但是可能使用起來有侷限性,下面我給大家提供一個場景思路,後面大家可以自己進行擴充套件.

我建立一個列舉類為 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中新增剛才那個頁面的屬性,會發現有提示,以及可以看到剛才列舉中定義的.這樣通過vs感知以及通過型別指定我們剛才按鈕的型別是不是很方面了.

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>