ASP.NET Core MVC – Tag Helpers 介紹

ASP.NET Core Tag Helpers系列目錄，這是第一篇，共五篇：

• ASP.NET Core MVC – Tag Helpers 介紹
• ASP.NET Core MVC – Caching Tag Helpers
• ASP.NET Core MVC – Form Tag Helpers
• ASP.NET Core MVC – 自定義 Tag Helpers
• ASP.NET Core MVC – Tag Helper 組件

簡介

Tag Helpers 提供了在視圖中更改和增強現有HTML元素的功能。將它們添加到視圖中，會經過Razor模板引擎處理並創建一個HTML，之后再返回給瀏覽器。有一些Tag Helpers，其實作為元素或實際的標簽（如environment，cache等）。

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

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

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

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

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

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

使用Tag Helpers的方法

我們可以：

• 把它們作為HTML屬性
• 或作為HTML標簽/元素
• 或者我們使用它們作為現有HTML元素的子元素

HTML屬性：

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

關於Image TagHelper更多細節將在下面內容中介紹！

HTML元素：

在上面的圖片中，我們可以看到一個自定義的super-cool-elementTagHelper作為自定義HTML標簽，還可以看到一個內置的environmentTagHelper，它對於基於當前環境呈現內容非常有用。

內置Tag Helpers列表

表單相關Tag Helpers：

• Form
• FormAction
• Input
• Label
• Option
• Select
• TextArea
• ValidationMessage
• ValidationSummary

緩存：

• Cache
• Distributed

其他：

• Image
• Anchor
• Script
• Link
• Environment

注意：所有內置的Tag Helpers以 asp- 作為前綴。

在這篇文章中，我們將看到一些常用的Tag Helpers，確切地說就是上面“其他”類別的Tag Helpers。在接下來的幾個帖子中，將會看到最重要的Form Tag Helpers；另外，我們將介紹緩存Tag Helpers最重要的細節。

Image Tag Helper

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

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

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

讓我們看看發生了什么：

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

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

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

Anchor Tag Helpers

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

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

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

Script and Link Tag Helpers

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

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

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

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

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

引用多個文件 - asp-src-include、asp-src-exclude

這是我最喜歡Tag Helpers的功能之一，它可以節省引用特定文件夾及其子文件夾中所有或多個文件的時間。

讓我們看一個例子，我在wwwroot文件夾下有多個文件夾和js文件：

現在，讓我們看看在 About.cshtml 視圖使用 asp-src-include TagHelper引用多個文件時會發生什么：

現在當我們運行應用程序，並查看頁面的內容：

漂亮！我們不必一個一個地手動引用文件，可以使用全局模式引用多個文件夾，也可以方便排除其中的某一些。

讓我們看看如何使用 asp-src-exclude TagHelper：

現在的輸出是：

我們從about文件夾中得到所有js文件中，但排除了a文件夾。只需要一個Script標簽，可以現實如此復雜HTML。gulp永別了，grunt以及您曾經在HTML引用JS文件任何方式！

這真的讓我太興奮了，因為這不是開發Angular、React應用程序，而是ASP.NET Core MVC程序。

Link Tag Helper

Link Tag Helper幾乎具有相同的功能，它使用的是 href 屬性而不是 src ，它還具有幾個不同的備用探測屬性：

此代碼將檢查類、屬性和值。如果找不到任何一個，那么將使用本地Bootstrap文件。

Environment Tag Helper

Environment Tag Helper將根據應用程序運行的環境呈現對應的內容。

讓我們看一看下面的代碼：

在開發環境中運行頁面將輸出如下效果：

原文：《ASP.NET Core MVC – All about Tag Helpers》https://codingblast.com/asp-net-core-tag-helpers/
翻譯：Sweet Tang
本文地址：http://www.cnblogs.com/tdfblog/p/about-tag-helpers-in-asp-net-core.html
歡迎轉載，請在明顯位置給出出處及鏈接。