ASP.NET?Core?MVC中使用Tag?Helper組件
Tag Helper 組件 - 簡介
之前我們已經(jīng)在幾個文章中談到了Tag Helpers,這一次我們會討論其它有關的事情。
在 ASP.NET Core 2 還為我們帶來了一個新功能 - Tag Helper 組件。
Tag Helper 組件負責生成或修改特定的HTML,它們與 Tag Helper 一起工作。
Tag Helper 將會運行您的 Tag Helper 組件。
Tag Helper 組件是動態(tài)地向HTML中添加內容最完美的選擇。
要使您的Tag Helper組件運行,您需要設置一個特定的Tag Helper。這個Tag Helper需要從內置的抽象類繼承 TagHelperComponentTagHelper
。
我知道,我知道這個命名非常令人困惑。
繼承自 TagHelperComponentTagHelper
的類型將是一個 Tag Helper,它將執(zhí)行與之匹配的 Tag Helper 組件。
步驟
我們首先創(chuàng)建一個新的 Tag Helper 組件。我們可以創(chuàng)建針對內置 head 和 body 標簽的 Tag Helper 組件;從特殊類 TagHelperComponentTagHelper
繼承的
Tag Helper,都可以創(chuàng)建 Tag Helper 組件。
我們來看一個例子。
我將從創(chuàng)建新的 Razor Pages 模板開始:
dotnet new razor
我們按如下步驟讓一個 Tag Helper 組件正常工作:
- 創(chuàng)建一個新的 Tag Helper 組件
- 將組件注入到DI
- 創(chuàng)建一個繼承自
TagHelperComponentTagHelper
的 Tag Helper 類 - 將 Tag Helper 包含在
_ViewImports.cshtml
文件中
創(chuàng)建一個新的 Tag Helper 組件:
public class ArticleTagHelperComponent : TagHelperComponent { public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output) { if (string.Equals(context.TagName, "article", StringComparison.OrdinalIgnoreCase)) { output.PostContent.AppendHtml("<script>console.log('ASP.NET Core - Love From Console');</script>"); } return Task.CompletedTask; } }
如果您使用過 Tag Helper,那么您應該很熟悉。在示例中,繼承自內置的TagHelperComponent
抽象類,然后重寫ProcessAsync
方法。
我們需要將 Tag Helper 組件成為我們應用程序的一部分,將其注入到服務容器中:
public void ConfigureServices(IServiceCollection services) { services.AddTransient<ITagHelperComponent, ArticleTagHelperComponent>(); services.AddMvc(); }
現(xiàn)在我們可以使用創(chuàng)建的 Tag Helper 組件!
創(chuàng)建Tag Helper:
[HtmlTargetElement("article")] [EditorBrowsable(EditorBrowsableState.Never)] public class ArticleTagHelperComponentTagHelper : TagHelperComponentTagHelper { public CodingBlastTagHelper(ITagHelperComponentManager componentManager, ILoggerFactory loggerFactory) : base(componentManager, loggerFactory) { } }
注意第一行,此 Tag Helper 助手的目標是HTML中的 所有 article 元素/標記。
為了讓我們的應用程序知道這個Tag Helper,我們必須將其添加到_ViewImports.cshtml
文件中:
@using IntroTagHelperComponent @namespace IntroTagHelperComponent.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper SampleTagHelperComponent.ArticleTagHelperComponentTagHelper, SampleTagHelperComponent
要看到實際的效果,我們需要在代碼中至少有一個 article 標簽,所以,我們修改Index.cshtml
頁面:
@model IndexModel @{ ViewData["Title"] = "Home page"; } <div></div> <article> TagHelperComponent will add stuff here. </article>
針對內置 Tag Helper 的 Tag Helper 組件
目前有兩個內置的 Tag Helper 繼承自TagHelperComponentTagHelper
類,它們位于 Microsoft.AspNetCore.Mvc.TagHelpers 程序集中 。
這兩個標簽助手是 HeadTagHelper 和 BodyTagHelper。它們使我們很容易將內容注入 head 和 body 中。我們所要做的是創(chuàng)建 Tag Helper 組件并將其注入我們的應用程序中。
// Copyright (c) .NET Foundation. All rights reserved. // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. using System.ComponentModel; using Microsoft.AspNetCore.Razor.TagHelpers; using Microsoft.Extensions.Logging; namespace Microsoft.AspNetCore.Mvc.Razor.TagHelpers { /// <summary> /// A <see cref="TagHelperComponentTagHelper"/> targeting the <head> HTML element. /// </summary> [HtmlTargetElement("head")] [EditorBrowsable(EditorBrowsableState.Never)] public class HeadTagHelper : TagHelperComponentTagHelper { /// <summary> /// Creates a new <see cref="HeadTagHelper"/>. /// </summary> /// <param name="manager">The <see cref="ITagHelperComponentManager"/> which contains the collection /// of <see cref="ITagHelperComponent"/>s.</param> /// <param name="loggerFactory">The <see cref="ILoggerFactory"/>.</param> public HeadTagHelper(ITagHelperComponentManager manager, ILoggerFactory loggerFactory) : base(manager, loggerFactory) { } } }
代碼非常簡單,它從 TagHelperComponentTagHelper 類繼承,目標是 head HTML元素。
如果您查看默認的 _ViewImports.cshtml
文件內容,您將看到在默認情況下將包含這些內容:
@using IntroTagHelperComponent @namespace IntroTagHelperComponent.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
我們可以將內置的 HeadTagHelper 使用我們的自定義 Tag Helper 組件來修改 head 標簽:
我們添加一個 Tag Helper 組件,它將檢查所有 head 標簽:
public class HeadTagHelperComponent : TagHelperComponent { public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output) { if (string.Equals(context.TagName, "head", StringComparison.OrdinalIgnoreCase)) { output.PostContent.AppendHtml("<script>console.log('head tag');</script>"); } return Task.CompletedTask; } }
當然,我們需要將添加的HeadTagHelperComponent
注入到我們的應用程序:
public void ConfigureServices(IServiceCollection services) { services.AddTransient<ITagHelperComponent, HeadTagHelperComponent>(); services.AddMvc(); }
代碼
示例代碼在GitHub - SampleTagHelperComponent。
總結
- Tag Helper 組件可用于動態(tài)地向HTML中添加內容
- 特殊 Tag Helper(從 TagHelperComponentTagHelper 類繼承)將執(zhí)行所有匹配的 Tag Helper 組件
到此這篇關于ASP.NET Core MVC中使用Tag Helper組件的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
ASP.NET Gridview 中使用checkbox刪除的2種方法實例分享
ASP.NET Gridview 中使用checkbox刪除的2種方法實例分享,需要的朋友可以參考一下2013-06-06微信公眾平臺開發(fā)之發(fā)送圖文消息.Net代碼解析
這篇文章主要為大家詳細解析了微信公眾平臺開發(fā)之發(fā)送圖文消息.Net代碼,感興趣的小伙伴們可以參考一下2016-06-06