原文:ASP.NET Core Razor 標(biāo)簽助手 - ASP.NET Core 基礎(chǔ)教程 - 簡(jiǎn)單教程，簡(jiǎn)單編程

ASP.NET Core Razor 標(biāo)簽助手

上一章節(jié)我們介紹了視圖導(dǎo)入，學(xué)習(xí)了如何使用視圖導(dǎo)入把一些公共的 C# 指令抽出來放到一起。這已經(jīng)大大方便了我們編寫控制器視圖了，到此為止，我們真的沒辦法再精簡(jiǎn)控制器視圖了。

但是，我總覺的 Index.cshtml 怪怪得，一時(shí)又想不起來哪里奇怪

算了，先喝杯茶再說..

....

....

真的啊，我剛剛真的去喝了瓶牛奶，然后，看了一部電影，結(jié)果，天黑了...有吃了頓飯...

我終于想起來了，原來是看 <a> 標(biāo)簽不順眼，我們?cè)賮砜纯?Index.cshtml 中的代碼

@model HomePageViewModel @{ViewBag.Title = "Home 控制器下的 Index 方法"; } <h1>歡迎!</h1> <div>這個(gè)消息來自 Home 控制器下的 Index 的視圖文件 index.cshtml </div> <table>@foreach (var employee in Model.Employees){<tr> <td><a href="/Home/Detail/@employee.ID">@employee.ID</a></td> <td>@employee.Name</td> </tr> } </table>

看到?jīng)]有，我們鏈接中的 URL 路徑中的 /Home/Detail/ 竟然是寫死的...寫死的

這萬一網(wǎng)站要是改版了，控制器和方法都不是 Home 和 Detail 了豈不是還要?jiǎng)谛膭诜蔚男薷?Razor 視圖嗎？

不行，絕對(duì)不能這樣

但，Razor 視圖中有什么辦法可以動(dòng)態(tài)生成鏈接嗎？

翻了下 Razor 手冊(cè)，還好，壓壓驚，還好，還好有一種方法可以動(dòng)態(tài)生成鏈接，那就是標(biāo)簽助手

Razor 標(biāo)簽助手

標(biāo)簽助手允許服務(wù)器端代碼 ( 也就是 C# 代碼) 參與到 Razor 文件中創(chuàng)建和渲染 HTML 元素

簡(jiǎn)單的說，標(biāo)簽助手是一項(xiàng)新功能，類似于 HTML 助手，可以幫助我們渲染 HTML

Razor 內(nèi)置了許多標(biāo)簽助手用來處理常見的任務(wù)。例如創(chuàng)建表單，鏈接，加載資源等

標(biāo)簽助手是用 C# 語言編寫的，它們根據(jù)元素名稱，屬性名稱或父標(biāo)簽創(chuàng)建 HTML 元素

例如，可以使用內(nèi)置的 LabelTagHelper 并傳遞相應(yīng)的屬性來生成 HTML <label> 元素

如果你對(duì) HTML 助手很熟悉，那么就可以輕松的使用標(biāo)簽助手來簡(jiǎn)化在 Razor 視圖中生成 HTML

檢查當(dāng)前項(xiàng)目是否安裝標(biāo)簽助手

ASP.NET Core MVC 中的 Razor 標(biāo)簽助手的命名空間是 Microsoft.AspNetCore.Mvc.TagHelpers 一般情況下系統(tǒng)會(huì)自動(dòng)安裝

我們只需要展開依賴項(xiàng)中的 Microsoft.AspNetCore.App 包，一路往下檢查即可

如果存在，則不用繼續(xù)安裝

安裝 Razor 標(biāo)簽助手

如果你沒有在 Microsoft.AspNetCore.App 包中找到 Microsoft.AspNetCore.Mvc.TagHelpers

則需要手動(dòng)安裝，安裝教程如下

在 依賴項(xiàng) 上添加右鍵，選擇 添加包

如果你的電腦是 Windows 系統(tǒng)，則是選擇 管理 NuGet 程序包

在 添加包 管理器中搜索 Microsoft.AspNetCore.Mvc.TagHelpers

接下來像之前我們安裝 EF 框架那樣點(diǎn)擊 添加包 即可

安裝成功后，你就能在依賴項(xiàng)中找到 Microsoft.AspNetCore.Mvc.TagHelpers

有一點(diǎn)要非常注意的是，安裝的版本要和當(dāng)前 ASP.NET Core 的版本一致，否則會(huì)安裝失敗

之前我一直不理解，后來理解了

關(guān)于標(biāo)簽助手

關(guān)于標(biāo)簽助手，我多說幾句

現(xiàn)在任何人都可以創(chuàng)作一個(gè)標(biāo)簽助手，所以如果你需要的標(biāo)簽助手不存在，你可以編寫自己的標(biāo)簽助手

你可以把自己創(chuàng)作的標(biāo)簽助手放在你的應(yīng)用程序項(xiàng)目中，但需要把該標(biāo)簽助手關(guān)聯(lián)到 Razor 視圖引擎

默認(rèn)情況下，標(biāo)簽助手不會(huì)一起被渲染到客戶端，即使這些標(biāo)簽助手看起來像融入了 HTML

Razor 會(huì)調(diào)用一些代碼來處理標(biāo)簽助手，標(biāo)簽助手可以從 HTML 中刪除自己，也可以添加額外的 HTML

導(dǎo)入標(biāo)簽助手

可以用標(biāo)簽助手做很多很棒的事情，但前提是需要向 Razor 注冊(cè)你的標(biāo)簽助手，甚至微軟官方的標(biāo)簽助手，以便 Razor 能夠在標(biāo)記中發(fā)現(xiàn)這些標(biāo)簽助手并且能夠 調(diào)用處理標(biāo)簽助手的代碼

注冊(cè)標(biāo)簽助手的指令是 @addTagHelper， 我們可以把這個(gè)指令放置到單個(gè)視圖中，或者如果您計(jì)劃在整個(gè)應(yīng)用程序中使用標(biāo)簽助手，則可以放在視圖導(dǎo)入 _ViewImports.cshtml

其實(shí)，_ViewImports.cshtml 的默認(rèn)代碼就導(dǎo)入了所有官方提供的標(biāo)簽助手

@namespace HelloWorld.Views @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

可以看到 @addTagHelper 指令有兩個(gè)參數(shù)

第一個(gè)參數(shù)，星號(hào) ( * ) 用于導(dǎo)入程序集的所有的標(biāo)簽助手

第二個(gè)參數(shù)，Microsoft.AspNet.Mvc.TagHelpers ，用于指定哪個(gè)程序集

第一個(gè)參數(shù)其實(shí)是一個(gè)類型名稱，所以如果只想使用某個(gè)標(biāo)簽助手，那么我們可以列出這個(gè)名稱，但如果想導(dǎo)入所有的標(biāo)簽助手，則可以使用星號(hào) ( * )

兩個(gè)參數(shù)合起來的意思導(dǎo)入程序集 Microsoft.AspNet.Mvc.TagHelpers 中的所有標(biāo)簽助手

使用標(biāo)簽助手

因?yàn)槲覀円呀?jīng)在視圖導(dǎo)入 _ViewImports.cshtml 中導(dǎo)入了標(biāo)簽助手，所以我們可以在 Index.cshtml 視圖中使用它們

我們可以使用 @Html.ActionLink URL 鏈接生成助手來創(chuàng)建自動(dòng)關(guān)聯(lián)到當(dāng)前控制器的某個(gè)方法的 <a> 標(biāo)簽

@Html.ActionLink 標(biāo)簽有三個(gè)參數(shù)，分別是 <a> 標(biāo)簽的顯示文本，當(dāng)前控制器下的動(dòng)作 ( action ) 和其它的附加參數(shù)組成的一個(gè)對(duì)象

現(xiàn)在我們就使用它來改造我們的 Index.cshtml 把，改造完成后如下

@model HomePageViewModel @{ViewBag.Title = "Home 控制器下的 Index 方法"; } <h1>歡迎!</h1> <div>這個(gè)消息來自 Home 控制器下的 Index 的視圖文件 index.cshtml </div> <table>@foreach (var employee in Model.Employees){<tr> <td>@Html.ActionLink(employee.ID.ToString(), "Detail", new { id = employee.ID })</td> <td>@employee.Name</td> </tr> } </table>

刷新瀏覽器，訪問首頁輸出如下

如果點(diǎn)擊鏈接 1，則輸出如下

HTML 助手

一般情況下，在視圖中我們都更喜歡類 HTML 語法，也就是 XML 語法

這樣看起來更直觀也更統(tǒng)一

而 Razor 也支持另外一種 HTML 助手，也就是 XML 語法的標(biāo)簽助手，這種助手直接在原來的 HTML 基礎(chǔ)上添加一些 asp- 開頭的屬性來生成 HTML 標(biāo)簽

例如，對(duì)于 Index.cshtml 中的 @Html.ActionLink，我們還可以這么寫

<a asp-action="Detail" asp-route-id="@employee.ID" >詳情</a>

其中，asp-action="Detail" 是我們想要獲得的動(dòng)作的名稱，如果想傳遞任何參數(shù)，可以使用 asp-route-* 標(biāo)簽助手，在這里我們想包含 ID 作為參數(shù)，則可以使用 asp-route-id

好吧，我們繼續(xù)對(duì) Index.cshtml 進(jìn)行改造吧，改造完成后代碼如下

@model HomePageViewModel @{ViewBag.Title = "Home 控制器下的 Index 方法"; } <h1>歡迎!</h1> <div>這個(gè)消息來自 Home 控制器下的 Index 的視圖文件 index.cshtml </div> <table> @foreach (var employee in Model.Employees) { <tr> <td><a asp-action="Detail" asp-route-Id="@employee.ID">詳情</a></td> <td>@employee.Name</td> </tr> } </table>

刷新瀏覽器，輸出結(jié)果如下

在實(shí)際的項(xiàng)目中，無論你選擇哪種，都是可以的，這是個(gè)人的愛好

但對(duì)于團(tuán)隊(duì)而言，我們建議做一個(gè)統(tǒng)一的規(guī)定，不然同時(shí)出現(xiàn)會(huì)造成閱讀困難

總結(jié)

以上是生活随笔為你收集整理的ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程，简单编程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。