asp.net core的TagHelper簡單使用

TagHelper（標簽助手）是ASP.NET Core非常好的一種新特性。可以擴展視圖，讓其看起來像一個原生HTML標簽。

應該使用TagHelper替換HtmlHelper，因其更簡潔更易用，且支持依賴注入。可以通過其構造函數中注入所需要的服務。

一、擴展的標簽：

下面使用一個簡單的標簽示例擴展：

[HtmlTargetElement("hello")]
    public class HelloTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "p";
            output.Attributes.Add("id", context.UniqueId);
            output.Attributes.Add("style", "color:red;font-weight:bold;");
            output.PreContent.SetContent("Hello ");
            output.PostContent.SetContent($", time is now: {DateTime.Now.ToString("HH:mm:")}");
        }
    }

在此定義了一個“hello”標簽，可以像其他標識一樣使用。

不過前提得先將該標簽所在的命名空間引用到到cshtml文件中（此處使用"_ViewImports.cshtml"進行設置）

@addTagHelper "*, TagAbout"

在View中使用，如在Index.cshtml中使用，如下：

<div class="col-md-3">
        <hello>Jackie Lee</hello>
    </div>    

運行效果：

產生的HTML如下：

 

二、擴展的標簽屬性：

定義a、p、ul、li、button、span、div標簽的屬性擴展TagHelper類如下，為其內容最后添加一段通過依賴注入進來的類調用返回的內容。

並為其添加title屬性，以提示“author-for"所設置的內容：

 [HtmlTargetElement("a", Attributes = ForAttributeName)]
    [HtmlTargetElement("p", Attributes = ForAttributeName)]
    [HtmlTargetElement("ul", Attributes = ForAttributeName)]
    [HtmlTargetElement("li", Attributes = ForAttributeName)]
    [HtmlTargetElement("button", Attributes = ForAttributeName)]
    [HtmlTargetElement("span", Attributes = ForAttributeName)]
    [HtmlTargetElement("div", Attributes = ForAttributeName)]
    public class AuthorTagHelper : TagHelper
    {
        private const string ForAttributeName = "author-for";
        private const string TextAttributeName = "content";

        [HtmlAttributeName(ForAttributeName)]
        public string AuthorFor { get; set; }

        private ContentManager _contentManager;

        public AuthorTagHelper(ContentManager contentManager)
        {
            _contentManager = contentManager;
        }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.Attributes.Add("title", AuthorFor);
            output.PostContent.AppendHtml($"<span style='font-weight:bold;color:orange;'>[{_contentManager.GetContent()}]</span>");
            // 可用於驗證
            if (false)
            {
                var builder = output.Content;
                output.SuppressOutput(); // nothing to output
                builder.AppendHtml(string.Empty);
            }
        }
    }

依賴注入的類：

public class ContentManager
    {
        public static ContentManager ContentMgr { get; private set; } = new ContentManager();
        public string GetContent()
        {
            return $"Well, this is the injected data by the tag helper.";
        }
    }

在Startup的ConfigureServices中添加依賴注入對象：

services.AddSingleton(ContentManager.ContentMgr);

在View中使用如下：

<div class="col-md-3">
        <hello>Jackie Lee</hello>
        <a href="#" author-for="Hello, I'm Jackie Lee.">Welcome to China!</a>
        <div author-for="Jackie Lee">Now it is the very good tag.</div>
        <p author-for="Well done.">Nice to meet you.</p>
        <span author-for="Nice, this is what does for you only.">*</span>
    </div>

運行效果：

產生的HTML內容：