ASP.NET Core MVC Tag Helpers 介绍
簡介
Tag Helpers 提供了在視圖中更改和增強(qiáng)現(xiàn)有HTML元素的功能。將它們添加到視圖中，會經(jīng)過Razor模板引擎處理并創(chuàng)建一個HTML，之后再返回給瀏覽器。有一些Tag Helpers，其實作為元素或?qū)嶋H的標(biāo)簽（如environment，cache等）。
它們使用HTML方式編寫，同時利用了Razor的強(qiáng)大功能、C#的簡潔和HTML的友好性。由于使用Tag Helpers感覺如此自然，看起來像標(biāo)準(zhǔn)的HTML，前端開發(fā)人員也可以輕松地適應(yīng)，不需要學(xué)習(xí)C#語法；此外，它們可以在現(xiàn)有元素范圍內(nèi)獲得完美的智能提示支持。
看一下簡單的例子，注意上下兩行代碼的區(qū)別：
因為我們在其中使用了Tag Helper，所以Visual Studio自動為img元素更改顏色。
為什么稱為Tag Helper？因為我們將HTML元素稱為標(biāo)簽（< div >，< body >，< span >），并且希望改進(jìn)或可能改變這些元素的行為。
它們可能會使您想到Razor中的HTML Helpers，的確，它們也具有部分相同的功能，但是，Tag Helpers使用起來更加自然；我們通常會使用它們來擴(kuò)展現(xiàn)有HTML元素，使用HTML Helpers是用來創(chuàng)建一個新的HTML元素。
它們讓我想到的另一件事：AngularJS指令。在AngularJS 1（組件進(jìn)入AngularJS 1.5之前）中，兩種最常見的指令類型是元素指令和屬性指令。元素指令將創(chuàng)建一個新的DOM元素，屬性指令用來改變現(xiàn)有DOM元素的行為。不同的是Tag Helpers在服務(wù)端運行，AngularJS在瀏覽器中運行。
使用Tag Helpers的方法
我們可以：
把它們作為HTML屬性
或作為HTML標(biāo)簽/元素
或者我們使用它們作為現(xiàn)有HTML元素的子元素
HTML屬性：
我們可以使用內(nèi)置或自定義的Tag Helpers作為現(xiàn)有HTML元素的一部分，通常是作為屬性的方式。
關(guān)于Image TagHelper更多細(xì)節(jié)將在下面內(nèi)容中介紹！
HTML元素：
在上面的圖片中，我們可以看到一個自定義的super-cool-elementTagHelper作為自定義HTML標(biāo)簽，還可以看到一個內(nèi)置的environmentTagHelper，它對于基于當(dāng)前環(huán)境呈現(xiàn)內(nèi)容非常有用。
內(nèi)置Tag Helpers列表
表單相關(guān)Tag Helpers：
Form
FormAction
Input
Label
Option
Select
TextArea
ValidationMessage
ValidationSummary
緩存：
Cache
Distributed
其他：
Image
Anchor
Script
Link
Environment
注意：所有內(nèi)置的Tag Helpers以 asp- 作為前綴。
在這篇文章中，我們將看到一些常用的Tag Helpers，確切地說就是上面“其他”類別的Tag Helpers。在接下來的幾個帖子中，將會看到最重要的Form Tag Helpers；另外，我們將介紹緩存Tag Helpers最重要的細(xì)節(jié)。
Image Tag Helper
此Tag Helper確保要顯示的圖片是文件系統(tǒng)中的最新圖像。
在這個例子中，使用Image Tag Helper，它基于當(dāng)前提供的image元素追加版本：
這意味著，每當(dāng)我們更改服務(wù)器上的圖片（~/images/ aspnetcore.png）時，Image Tag Helper將附加一個不同的字符串，新的圖像將不會被緩存，所以在每次圖片改變時用戶都可以訪問到最新的圖片；同時，如果在服務(wù)器上的圖片沒有更改，我們?nèi)匀粫褂脠D像緩存的版本。
讓我們看看發(fā)生了什么：
如果我們刷新頁面，將獲得相同內(nèi)容和相同版本的后綴。
在MVC應(yīng)用程序運行時，我們將相同文件名的另一個圖片復(fù)制到images文件夾。如果我們再刷新頁面：
除了版本后綴，其它都是一樣的。
Anchor Tag Helpers
常見的a或者anchor標(biāo)簽可以使用很多類型的Tag Helpers進(jìn)行擴(kuò)展，您最可能使用到 asp-controller 和 asp-action 這兩個標(biāo)簽助手，它們可以幫助我們快速創(chuàng)建指向特定Action方法的鏈接。
如果您熟悉MVC，您可以使用@Html.ActionLink幫助類達(dá)到與Anchor Tag Helpers相同的結(jié)果。
在這個特殊的例子中，老的方式可能看起來更簡短和方便，但是由于我們使用“自定義屬性”或Tag Helpers擴(kuò)展現(xiàn)有的HTML標(biāo)記，所以新的方式更加自然；此外，這些方式更清晰，因為我們可以很容易地辨別哪一部分是Action，哪一部分是控制器。
Script and Link Tag Helpers
這兩個Tag Helpers使我們在HTML中添加JS和CSS引用更容易；如果我們使用像CDN這樣的外部資源，還能使用本地備用的URL地址。
此外，它們大大簡化了使用全局模式時引用大量資源文件。
就像image標(biāo)簽助手，Script和Link Tag Helpers也可以幫助我們緩存資源文件。
這個例子顯示我們引用了來自 aspnetcdn 的 Bootstrap JS文件。如果該網(wǎng)站不可用，將引用本地文件，使用 asp-fallback-src Tag Helper；什么是 asp-fallback-test？它是一種知道是否會使用本地備用的方法，在這個示例中，我們使用一個特定的代碼來檢查Bootstrap的JS功能是否存在。
如果 asp-fallback-test 中的表達(dá)式返回false（falsy），將使用 asp-fallback-src 指定的源文件。
引用多個文件 - asp-src-include、asp-src-exclude
這是我最喜歡Tag Helpers的功能之一，它可以節(jié)省引用特定文件夾及其子文件夾中所有或多個文件的時間。
讓我們看一個例子，我在wwwroot文件夾下有多個文件夾和js文件：
現(xiàn)在，讓我們看看在 About.cshtml 視圖使用 asp-src-include TagHelper引用多個文件時會發(fā)生什么：
現(xiàn)在當(dāng)我們運行應(yīng)用程序，并查看頁面的內(nèi)容：
漂亮！我們不必一個一個地手動引用文件，可以使用全局模式引用多個文件夾，也可以方便排除其中的某一些。
讓我們看看如何使用 asp-src-exclude TagHelper：
現(xiàn)在的輸出是：
我們從about文件夾中得到所有js文件中，但排除了a文件夾。只需要一個Script標(biāo)簽，可以現(xiàn)實如此復(fù)雜HTML。gulp永別了，grunt以及您曾經(jīng)在HTML引用JS文件任何方式！
這真的讓我太興奮了，因為這不是開發(fā)Angular、React應(yīng)用程序，而是ASP.NET Core MVC程序。
Link Tag Helper
Link Tag Helper幾乎具有相同的功能，它使用的是 href 屬性而不是 src ，它還具有幾個不同的備用探測屬性：
此代碼將檢查類、屬性和值。如果找不到任何一個，那么將使用本地Bootstrap文件。
Environment Tag Helper
Environment Tag Helper將根據(jù)應(yīng)用程序運行的環(huán)境呈現(xiàn)對應(yīng)的內(nèi)容。
讓我們看一看下面的代碼：
在開發(fā)環(huán)境中運行頁面將輸出如下效果：
相關(guān)文章：
asp.net core mvc實現(xiàn)偽靜態(tài)功能
如何在多個項目中分離Asp.Net Core Mvc的Controller和Areas
asp.net core 編譯mvc，routing，security源代碼進(jìn)行本地調(diào)試
ASP.NET Core MVC四種枚舉綁定方式
ASP.NET Core MVC 模型綁定用法及原理
ASP.NET Core MVC 控制器創(chuàng)建與依賴注入
ASP.NET Core MVC 過濾器介紹
原文地址：http://www.cnblogs.com/tdfblog/p/about-tag-helpers-in-asp-net-core.html
.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關(guān)注
總結(jié)
以上是生活随笔為你收集整理的ASP.NET Core MVC Tag Helpers 介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET Core 源码学习之 O
- 下一篇： ASP.NET Core 源码学习之 O