進(jìn)步，才是人應(yīng)該有的現(xiàn)象。—— 雨果

　　今天開始，我就來(lái)說(shuō)說(shuō)asp.net core的新特性，今天就說(shuō)說(shuō)TagHelper標(biāo)簽助手。雖然學(xué)習(xí).net，最有幫助的就是microsoft的官方說(shuō)明文檔了，里面把一些使用說(shuō)明都寫的非常清楚，但奈何.net core放入文檔微軟還沒(méi)來(lái)得及翻譯，對(duì)于英文不好的人來(lái)說(shuō)簡(jiǎn)直就是看的艱辛。所以今天就來(lái)學(xué)習(xí)學(xué)習(xí)這標(biāo)簽助手，和博客園大佬分享分享經(jīng)驗(yàn)。

　　想看Microsoft官方文檔和Git項(xiàng)目的可以直接點(diǎn)擊以下傳送門~~

　　asp.net core 官方文檔

　　asp.net core github項(xiàng)目

　　說(shuō)起TagHelper給我的印象，有點(diǎn)像asp.net form當(dāng)中的服務(wù)器端控件，又有點(diǎn)像Angular或者Vue當(dāng)中的“組件”的后端實(shí)現(xiàn)版本。用戶可以將一組html標(biāo)簽集合轉(zhuǎn)換為一個(gè)自定義標(biāo)簽，實(shí)現(xiàn)了html代碼的復(fù)用。

　　那么正文開始~~

　　首先，我們需要安裝一個(gè)vs2017插件：Razor Language Services。這個(gè)插件能在html中智能提示用戶自定義的標(biāo)簽助手。

　　https://marketplace.visualstudio.com/items?itemName=ms-madsk.RazorLanguageServices

　　創(chuàng)建一個(gè)asp.net core項(xiàng)目

　　

　　使用微軟定義的標(biāo)簽助手，在安裝了插件后，使用標(biāo)簽助手的標(biāo)簽會(huì)進(jìn)行高亮顯示

　　上圖中environment、link、a標(biāo)簽均使用了標(biāo)簽助手實(shí)現(xiàn)各自的功能

<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">taghelpersample</a>

　　a標(biāo)簽中通過(guò)使用asp-controller,asp-action自定義屬性來(lái)實(shí)現(xiàn)路由訪問(wèn)。

　　這時(shí)有人會(huì)說(shuō)，我也可以使用@Html類來(lái)實(shí)現(xiàn)相同功能，為什么需要使用TagHelper？

@Html.ActionLink("taghelpersample", "Index", "Home",null, new { Class = "navbar-brand" })

　　確實(shí)，使用@Html幫助類我們能實(shí)現(xiàn)相同的功能，但是使用標(biāo)簽助手的方式不是更加符合html的標(biāo)簽語(yǔ)法嗎，對(duì)于強(qiáng)迫癥程序員簡(jiǎn)直就是福音~~。而且對(duì)于標(biāo)簽的原有屬性的添加例如class，標(biāo)簽助手的使用也更加方便。

<!--標(biāo)簽助手版form--><form asp-controller="Home" asp-action="Index" class="form-horizontal" method="post"></form><!--Html幫助類版form-->@using (Html.BeginForm("Index", "Home", FormMethod.Post,, new { Class = "form-horizontal" })) {}

　　此外，標(biāo)簽助手的另外一個(gè)特色就是可以自定義，具體步驟如下：

　　（1）創(chuàng)建派生自TagHelper類的Class

　　 //類會(huì)默認(rèn)轉(zhuǎn)換為<text-collection></text-collection>　　 public class TextCollectionTagHelper:TagHelper{ ? ? ?
?public override void Process(TagHelperContext context, TagHelperOutput output){ ? ? ? ? ?
??base.Process(context, output);}}

　　（2）設(shè)置屬性與基本類

public string Color { get; set; } ? ? ? ?

public override void Process(TagHelperContext context, TagHelperOutput output){output.TagName = "div";output.Attributes.Add("style", "color:" + Color); ? ? ? ? ?
? ? ? ? ?var text = "Hello,World"; ? ? ?
? ? ? ? ? var h1 = new TagBuilder("h1"); ? ? ? ?
? ? ? ? ?var h2 = new TagBuilder("h2"); ? ?
? ? ? ? ? var h3 = new TagBuilder("h3");
? ? ? ? ? ?var h4 = new TagBuilder("h4");
? ? ? ? ? ?var h5 = new TagBuilder("h5"); ?
? ? ? ? ?var h6 = new TagBuilder("h6");h1.InnerHtml.Append(text);h2.InnerHtml.Append(text);h3.InnerHtml.Append(text);h4.InnerHtml.Append(text);h5.InnerHtml.Append(text);h6.InnerHtml.Append(text);output.Content.AppendHtml(h1);output.Content.AppendHtml(h2);output.Content.AppendHtml(h3);output.Content.AppendHtml(h4);output.Content.AppendHtml(h5);output.Content.AppendHtml(h6);}

　　（3）在_ViewImports.cshtml導(dǎo)入類命名空間

@addTagHelper *,taghelpersample

　　（4）在cshtml中使用標(biāo)簽助手

<text-collection color="red"></text-collection><text-collection color="blue"></text-collection><text-collection color="#666"></text-collection>

　　（5）調(diào)試效果

OK，今天關(guān)于TagHelper就分享到這

原文地址：http://www.cnblogs.com/billming/p/7136047.html

---

.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺(tái)或掃描二維碼關(guān)注

總結(jié)

以上是生活随笔為你收集整理的asp.net core新特性(1):TagHelper的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。