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