asp.net core新特性之TagHelper標簽助手
今天開始，我就來說說asp.net core的新特性，今天就說說TagHelper標簽助手。雖然學習.net，最有幫助的就是microsoft的官方說明文檔了，里面把一些使用說明都寫的非常清楚，但奈何.net core放入文檔微軟還沒來得及翻譯，對于英文不好的人來說簡直就是看的艱辛。所以今天就來學習學習這標簽助手，和博客園大佬分享分享經(jīng)驗。
想看Microsoft官方文檔和Git項目的可以直接點擊以下傳送門~~
說起TagHelper給我的印象，有點像asp.net form當中的服務器端控件，又有點像Angular或者Vue當中的“組件”的后端實現(xiàn)版本。用戶可以將一組html標簽集合轉(zhuǎn)換為一個自定義標簽，實現(xiàn)了html代碼的復用。
那么正文開始~~
首先，我們需要安裝一個vs2017插件：Razor Language Services。這個插件能在html中智能提示用戶自定義的標簽助手。
https://marketplace.visualstudio.com/items?itemName=ms-madsk.RazorLanguageServices
創(chuàng)建一個asp.net core項目
使用微軟定義的標簽助手，在安裝了插件后，使用標簽助手的標簽會進行高亮顯示
上圖中environment、link、a標簽均使用了標簽助手實現(xiàn)各自的功能
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">taghelpersample</a>
a標簽中通過使用asp-controller,asp-action自定義屬性來實現(xiàn)路由訪問。
這時有人會說，我也可以使用@Html類來實現(xiàn)相同功能，為什么需要使用TagHelper？
@Html.ActionLink("taghelpersample", "Index", "Home",null, new { Class = "navbar-brand" })
確實，使用@Html幫助類我們能實現(xiàn)相同的功能，但是使用標簽助手的方式不是更加符合html的標簽語法嗎，對于強迫癥程序員簡直就是福音~~。而且對于標簽的原有屬性的添加例如class，標簽助手的使用也更加方便。
<!--標簽助手版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" }))
{
}
此外，標簽助手的另外一個特色就是可以自定義，具體步驟如下：
（1）創(chuàng)建派生自TagHelper類的Class
//類會默認轉(zhuǎn)換為<text-collection></text-collection>
public class TextCollectionTagHelper:TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
base.Process(context, output);
}
}
（2）設置屬性與基本類
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導入類命名空間
@addTagHelper *,taghelpersample
（4）在cshtml中使用標簽助手
<text-collection color="red"></text-collection> <text-collection color="blue"></text-collection> <text-collection color="#666"></text-collection>
（5）調(diào)試效果
OK，今天關于TagHelper就分享到這。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
asp.net 多文件上傳，兼容IE6/7/8，提供完整代碼下載
項目中需要使用多文件上傳，上傳的文件保存在磁盤文件上，文件相關信息保存在數(shù)據(jù)庫里。2010-07-07
.NET?ORM框架SqlSugar實現(xiàn)導航查詢功能
今天這篇文章分享一款好用簡單的ORM框架?SqlSugar,相比?EF?Core的導航查詢更加簡單,配置更加容易,幾分鐘就能上手,對.NET?ORM框架SqlSugar實現(xiàn)導航查詢功能感興趣的朋友一起看看吧2022-04-04
asp.net使用Repeater控件中的全選進行批量操作實例
這篇文章主要介紹了asp.net使用Repeater控件中的全選進行批量操作方法,實例分析了Repeater控件的使用技巧,需要的朋友可以參考下2015-01-01
HTTP錯誤500.19解決方法(定義了重復的節(jié)點)
HTTP 錯誤 500.19 - Internal Server Error 無法訪問請求的頁面，因為該頁的相關配置數(shù)據(jù)無效2013-06-06
cookie里面不能寫中文，是由于cookie先天的編碼方式造成的,所以有必要存在一種中間的編碼方式:URLEncode是最好的選擇,感興趣的你可千萬不要錯過了哈，或許本文提供的知識點對你學習cookie有所幫助2013-02-02
.NET集成DeveloperSharp實現(xiàn)高效分頁與無主鍵分頁
DeveloperSharp系列近期又被制造業(yè)ERP、民航飛行App、建筑BIM、電力掌上營業(yè)廳、等多家大型采用,站在巨人的肩膀上你能走的更遠,這篇文章主要介紹了.NET集成DeveloperSharp實現(xiàn)高效分頁與無主鍵分頁,需要的朋友可以參考下2024-06-06
.net動態(tài)顯示當前時間(客戶端javascript)
剛才在首頁看到 asp.net實現(xiàn)動態(tài)顯示當前時間 這篇文章, 作者用Ajax實現(xiàn)類似時鐘的效果！2009-11-11
asp.net中的“按需打印”(打印你需要打印的部分) 實現(xiàn)代碼
有時我們需要對asp.net網(wǎng)頁中某些特定部分進行打印，很多人采用CSS樣式或特定的打印控件來解決網(wǎng)頁定制打印功能。這里采用Javascript樣式替換方式進行打印，使網(wǎng)頁顯示與打印效果相分離。2013-06-06
asp.net中也需要實現(xiàn)文件的下載，因此下面的方法可以參考下除了第四種不推薦以外，其他的都可以，但是個人感覺分塊下載的要好一點。沒有仔細測試，所以可能有問題。2011-02-02
在.NET2.0中使用自定義事務操作...2006-09-09