自定義標記助手

你可以通過實現 ITagHelper 或從便利類 TagHelper 派生來建立自己的標記助手。

  • 預設約定是定位與助手名稱匹配的 html 標記,而不使用可選的 TagHelper 字尾。例如,WidgetTagHelper 將以 <widget> 標籤為目標。
  • [HtmlTargetElement] 屬性可用於進一步控制目標標籤
  • 該類的任何公共屬性都可以作為剃刀標記中的屬性賦值。例如,公共屬性 public string Title {get; set;} 可以被賦予一個值 <widget title="my title">
  • 預設情況下,標記幫助程式將標記助手的 Pascal 環境 C#類名稱和屬性轉換為較低的 kebab 案例。例如,如果你省略使用 [HtmlTargetElement] 並且類名是 WidgetBoxTagHelper,那麼在 Razor 你會寫 <widget-box></widget-box>
  • ProcessProcessAsync 包含渲染邏輯。兩者都接收上下文引數,其中包含有關正在呈現的當前標記的資訊以及用於自定義呈現結果的輸出引數。

需要將包含自定義標記助手的任何程式集新增到 _ViewImports.cshtml 檔案中(注意它是要註冊的程式集,而不是名稱空間):

@addTagHelper *, MyAssembly

示例視窗小部件自定義標記助手

以下示例建立一個自定義視窗小部件標記幫助程式,它將以 razor 標記為目標,如:

<widget-box title="My Title">This is my content: @ViewData["Message"]</widget-box>

哪個將呈現為:

<div class="widget-box">
    <div class="widget-header">My Title</div>
    <div class="widget-body">This is my content: some message</div>
</div>

建立此類標記幫助程式所需的編碼如下:

[HtmlTargetElement("widget-box")]
public class WidgetTagHelper : TagHelper
{
    public string Title { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var outerTag = new TagBuilder("div");
        outerTag.Attributes.Add("class", output.TagName);
        output.MergeAttributes(outerTag);
        output.TagName = outerTag.TagName;

        //Create the header
        var header = new TagBuilder("div");
        header.Attributes.Add("class", "widget-header");
        header.InnerHtml.Append(this.Title);
        output.PreContent.SetHtmlContent(header);

        //Create the body and replace original tag helper content
        var body = new TagBuilder("div");
        body.Attributes.Add("class", "widget-body");
        var originalContents = await output.GetChildContentAsync();
        body.InnerHtml.Append(originalContents.GetContent());
        output.Content.SetHtmlContent(body);
    }
}