Tag Helpers 提供了在視圖中更改和增強現(xiàn)有HTML元素的功能。將它們添加到視圖中，會經(jīng)過Razor模板引擎處理并創(chuàng)建一個HTML，之后再返回給瀏覽器。有一些Tag Helpers，其實作為元素或?qū)嶋H的標簽（如environment，cache等）。

它們使用HTML方式編寫，同時利用了Razor的強大功能、C#的簡潔和HTML的友好性。由于使用Tag Helpers感覺如此自然，看起來像標準的HTML，前端開發(fā)人員也可以輕松地適應，不需要學習C#語法；此外，它們可以在現(xiàn)有元素范圍內(nèi)獲得完美的智能提示支持。

看一下簡單的例子，注意上下兩行代碼的區(qū)別：

因為我們在其中使用了Tag Helper，所以Visual Studio自動為img元素更改顏色。

為什么稱為Tag Helper？因為我們將HTML元素稱為標簽（< div >，< body >，< span >），并且希望改進或可能改變這些元素的行為。

它們可能會使您想到Razor中的HTML Helpers，的確，它們也具有部分相同的功能，但是，Tag Helpers使用起來更加自然；我們通常會使用它們來擴展現(xiàn)有HTML元素，使用HTML Helpers是用來創(chuàng)建一個新的HTML元素。

它們讓我想到的另一件事：AngularJS指令。在AngularJS 1（組件進入AngularJS 1.5之前）中，兩種最常見的指令類型是元素指令和屬性指令。元素指令將創(chuàng)建一個新的DOM元素，屬性指令用來改變現(xiàn)有DOM元素的行為。不同的是Tag Helpers在服務端運行，AngularJS在瀏覽器中運行。

使用Tag Helpers的方法

我們可以：

把它們作為HTML屬性
或作為HTML標簽/元素
或者我們使用它們作為現(xiàn)有HTML元素的子元素

HTML屬性：

我們可以使用內(nèi)置或自定義的Tag Helpers作為現(xiàn)有HTML元素的一部分，通常是作為屬性的方式。

關(guān)于Image TagHelper更多細節(jié)將在下面內(nèi)容中介紹！

HTML元素：

在上面的圖片中，我們可以看到一個自定義的super-cool-elementTagHelper作為自定義HTML標簽，還可以看到一個內(nèi)置的environmentTagHelper，它對于基于當前環(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最重要的細節(jié)。

Image Tag Helper

此Tag Helper確保要顯示的圖片是文件系統(tǒng)中的最新圖像。

在這個例子中，使用Image Tag Helper，它基于當前提供的image元素追加版本：

這意味著，每當我們更改服務器上的圖片（~/images/ aspnetcore.png）時，Image Tag Helper將附加一個不同的字符串，新的圖像將不會被緩存，所以在每次圖片改變時用戶都可以訪問到最新的圖片；同時，如果在服務器上的圖片沒有更改，我們?nèi)匀粫褂脠D像緩存的版本。

讓我們看看發(fā)生了什么：

如果我們刷新頁面，將獲得相同內(nèi)容和相同版本的后綴。

在MVC應用程序運行時，我們將相同文件名的另一個圖片復制到images文件夾。如果我們再刷新頁面：

除了版本后綴，其它都是一樣的。

Anchor Tag Helpers

常見的a或者anchor標簽可以使用很多類型的Tag Helpers進行擴展，您最可能使用到 asp-controller 和 asp-action 這兩個標簽助手，它們可以幫助我們快速創(chuàng)建指向特定Action方法的鏈接。

如果您熟悉MVC，您可以使用@Html.ActionLink幫助類達到與Anchor Tag Helpers相同的結(jié)果。

在這個特殊的例子中，老的方式可能看起來更簡短和方便，但是由于我們使用“自定義屬性”或Tag Helpers擴展現(xiàn)有的HTML標記，所以新的方式更加自然；此外，這些方式更清晰，因為我們可以很容易地辨別哪一部分是Action，哪一部分是控制器。

Script and Link Tag Helpers

這兩個Tag Helpers使我們在HTML中添加JS和CSS引用更容易；如果我們使用像CDN這樣的外部資源，還能使用本地備用的URL地址。

此外，它們大大簡化了使用全局模式時引用大量資源文件。

就像image標簽助手，Script和Link Tag Helpers也可以幫助我們緩存資源文件。

這個例子顯示我們引用了來自 aspnetcdn 的 Bootstrap JS文件。如果該網(wǎng)站不可用，將引用本地文件，使用 asp-fallback-src Tag Helper；什么是 asp-fallback-test？它是一種知道是否會使用本地備用的方法，在這個示例中，我們使用一個特定的代碼來檢查Bootstrap的JS功能是否存在。

如果 asp-fallback-test 中的表達式返回false（falsy），將使用 asp-fallback-src 指定的源文件。