ASP.NET?Core?MVC中使用Tag?Helper組件
Tag Helper 組件 - 簡(jiǎn)介
之前我們已經(jīng)在幾個(gè)文章中談到了Tag Helpers,這一次我們會(huì)討論其它有關(guān)的事情。
在 ASP.NET Core 2 還為我們帶來(lái)了一個(gè)新功能 - Tag Helper 組件。
Tag Helper 組件負(fù)責(zé)生成或修改特定的HTML,它們與 Tag Helper 一起工作。
Tag Helper 將會(huì)運(yùn)行您的 Tag Helper 組件。
Tag Helper 組件是動(dòng)態(tài)地向HTML中添加內(nèi)容最完美的選擇。
要使您的Tag Helper組件運(yùn)行,您需要設(shè)置一個(gè)特定的Tag Helper。這個(gè)Tag Helper需要從內(nèi)置的抽象類(lèi)繼承 TagHelperComponentTagHelper
。
我知道,我知道這個(gè)命名非常令人困惑。
繼承自 TagHelperComponentTagHelper
的類(lèi)型將是一個(gè) Tag Helper,它將執(zhí)行與之匹配的 Tag Helper 組件。
步驟
我們首先創(chuàng)建一個(gè)新的 Tag Helper 組件。我們可以創(chuàng)建針對(duì)內(nèi)置 head 和 body 標(biāo)簽的 Tag Helper 組件;從特殊類(lèi) TagHelperComponentTagHelper
繼承的
Tag Helper,都可以創(chuàng)建 Tag Helper 組件。
我們來(lái)看一個(gè)例子。
我將從創(chuàng)建新的 Razor Pages 模板開(kāi)始:
dotnet new razor
我們按如下步驟讓一個(gè) Tag Helper 組件正常工作:
- 創(chuàng)建一個(gè)新的 Tag Helper 組件
- 將組件注入到DI
- 創(chuàng)建一個(gè)繼承自
TagHelperComponentTagHelper
的 Tag Helper 類(lèi) - 將 Tag Helper 包含在
_ViewImports.cshtml
文件中
創(chuàng)建一個(gè)新的 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; } }
如果您使用過(guò) Tag Helper,那么您應(yīng)該很熟悉。在示例中,繼承自內(nèi)置的TagHelperComponent
抽象類(lèi),然后重寫(xiě)ProcessAsync
方法。
我們需要將 Tag Helper 組件成為我們應(yīng)用程序的一部分,將其注入到服務(wù)容器中:
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 助手的目標(biāo)是HTML中的 所有 article 元素/標(biāo)記。
為了讓我們的應(yīng)用程序知道這個(gè)Tag Helper,我們必須將其添加到_ViewImports.cshtml
文件中:
@using IntroTagHelperComponent @namespace IntroTagHelperComponent.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper SampleTagHelperComponent.ArticleTagHelperComponentTagHelper, SampleTagHelperComponent
要看到實(shí)際的效果,我們需要在代碼中至少有一個(gè) article 標(biāo)簽,所以,我們修改Index.cshtml
頁(yè)面:
@model IndexModel @{ ViewData["Title"] = "Home page"; } <div></div> <article> TagHelperComponent will add stuff here. </article>
針對(duì)內(nèi)置 Tag Helper 的 Tag Helper 組件
目前有兩個(gè)內(nèi)置的 Tag Helper 繼承自TagHelperComponentTagHelper
類(lèi),它們位于 Microsoft.AspNetCore.Mvc.TagHelpers 程序集中 。
這兩個(gè)標(biāo)簽助手是 HeadTagHelper 和 BodyTagHelper。它們使我們很容易將內(nèi)容注入 head 和 body 中。我們所要做的是創(chuàng)建 Tag Helper 組件并將其注入我們的應(yīng)用程序中。
// 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) { } } }
代碼非常簡(jiǎn)單,它從 TagHelperComponentTagHelper 類(lèi)繼承,目標(biāo)是 head HTML元素。
如果您查看默認(rèn)的 _ViewImports.cshtml
文件內(nèi)容,您將看到在默認(rèn)情況下將包含這些內(nèi)容:
@using IntroTagHelperComponent @namespace IntroTagHelperComponent.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
我們可以將內(nèi)置的 HeadTagHelper 使用我們的自定義 Tag Helper 組件來(lái)修改 head 標(biāo)簽:
我們添加一個(gè) Tag Helper 組件,它將檢查所有 head 標(biāo)簽:
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; } }
當(dāng)然,我們需要將添加的HeadTagHelperComponent
注入到我們的應(yīng)用程序:
public void ConfigureServices(IServiceCollection services) { services.AddTransient<ITagHelperComponent, HeadTagHelperComponent>(); services.AddMvc(); }
代碼
示例代碼在GitHub - SampleTagHelperComponent。
總結(jié)
- Tag Helper 組件可用于動(dòng)態(tài)地向HTML中添加內(nèi)容
- 特殊 Tag Helper(從 TagHelperComponentTagHelper 類(lèi)繼承)將執(zhí)行所有匹配的 Tag Helper 組件
到此這篇關(guān)于ASP.NET Core MVC中使用Tag Helper組件的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
.NET實(shí)現(xiàn)魔方游戲(一)之任意階魔方的表示
這篇文章主要介紹了.NET實(shí)現(xiàn)魔方游戲(一)之任意階魔方的表示 的相關(guān)資料,需要的朋友可以參考下2016-02-02ASP.NET Gridview 中使用checkbox刪除的2種方法實(shí)例分享
ASP.NET Gridview 中使用checkbox刪除的2種方法實(shí)例分享,需要的朋友可以參考一下2013-06-06.net6簡(jiǎn)單使用NPOI讀取Excel的項(xiàng)目實(shí)踐
本文主要介紹了.net6簡(jiǎn)單使用NPOI讀取Excel的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06asp.net生成靜態(tài)頁(yè)并分頁(yè)+ubb
編程思路生成靜態(tài)頁(yè)其實(shí)只有內(nèi)容部分是需要分頁(yè)的,生成靜態(tài)頁(yè)并分頁(yè)的步驟是在textarea或者在線編輯器中,需要分頁(yè)的地方就插入一個(gè)[ page ]2008-10-10微信公眾平臺(tái)開(kāi)發(fā)之發(fā)送圖文消息.Net代碼解析
這篇文章主要為大家詳細(xì)解析了微信公眾平臺(tái)開(kāi)發(fā)之發(fā)送圖文消息.Net代碼,感興趣的小伙伴們可以參考一下2016-06-06sqlserver 刪除重復(fù)記錄處理(轉(zhuǎn))
刪除重復(fù)記錄有大小關(guān)系時(shí),保留大或小其中一個(gè)記錄2011-07-07