原文:ASP.NET Core Razor 標簽助手 - ASP.NET Core 基礎教程 - 簡單教程，簡單編程

ASP.NET Core Razor 標簽助手

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

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

算了，先喝杯茶再說..

....

....

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

我終于想起來了，原來是看 <a> 標簽不順眼，我們再來看看 Index.cshtml 中的代碼

@model HomePageViewModel @{ViewBag.Title = "Home 控制器下的 Index 方法"; } <h1>歡迎!</h1> <div>這個消息來自 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>

看到沒有，我們鏈接中的 URL 路徑中的 /Home/Detail/ 竟然是寫死的...寫死的

這萬一網站要是改版了，控制器和方法都不是 Home 和 Detail 了豈不是還要勞心勞肺的修改 Razor 視圖嗎？

不行，絕對不能這樣

但，Razor 視圖中有什么辦法可以動態生成鏈接嗎？

翻了下 Razor 手冊，還好，壓壓驚，還好，還好有一種方法可以動態生成鏈接，那就是標簽助手

Razor 標簽助手

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

簡單的說，標簽助手是一項新功能，類似于 HTML 助手，可以幫助我們渲染 HTML

Razor 內置了許多標簽助手用來處理常見的任務。例如創建表單，鏈接，加載資源等

標簽助手是用 C# 語言編寫的，它們根據元素名稱，屬性名稱或父標簽創建 HTML 元素

例如，可以使用內置的 LabelTagHelper 并傳遞相應的屬性來生成 HTML <label> 元素

如果你對 HTML 助手很熟悉，那么就可以輕松的使用標簽助手來簡化在 Razor 視圖中生成 HTML

檢查當前項目是否安裝標簽助手

ASP.NET Core MVC 中的 Razor 標簽助手的命名空間是 Microsoft.AspNetCore.Mvc.TagHelpers 一般情況下系統會自動安裝

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

如果存在，則不用繼續安裝

安裝 Razor 標簽助手

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

則需要手動安裝，安裝教程如下

在 依賴項 上添加右鍵，選擇 添加包

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

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

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

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

有一點要非常注意的是，安裝的版本要和當前 ASP.NET Core 的版本一致，否則會安裝失敗

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

關于標簽助手

關于標簽助手，我多說幾句

現在任何人都可以創作一個標簽助手，所以如果你需要的標簽助手不存在，你可以編寫自己的標簽助手

你可以把自己創作的標簽助手放在你的應用程序項目中，但需要把該標簽助手關聯到 Razor 視圖引擎

默認情況下，標簽助手不會一起被渲染到客戶端，即使這些標簽助手看起來像融入了 HTML

Razor 會調用一些代碼來處理標簽助手，標簽助手可以從 HTML 中刪除自己，也可以添加額外的 HTML

導入標簽助手

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

注冊標簽助手的指令是 @addTagHelper， 我們可以把這個指令放置到單個視圖中，或者如果您計劃在整個應用程序中使用標簽助手，則可以放在視圖導入 _ViewImports.cshtml

其實，_ViewImports.cshtml 的默認代碼就導入了所有官方提供的標簽助手

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

可以看到 @addTagHelper 指令有兩個參數

第一個參數，星號 ( * ) 用于導入程序集的所有的標簽助手

第二個參數，Microsoft.AspNet.Mvc.TagHelpers ，用于指定哪個程序集

第一個參數其實是一個類型名稱，所以如果只想使用某個標簽助手，那么我們可以列出這個名稱，但如果想導入所有的標簽助手，則可以使用星號 ( * )

兩個參數合起來的意思導入程序集 Microsoft.AspNet.Mvc.TagHelpers 中的所有標簽助手

使用標簽助手

因為我們已經在視圖導入 _ViewImports.cshtml 中導入了標簽助手，所以我們可以在 Index.cshtml 視圖中使用它們

我們可以使用 @Html.ActionLink URL 鏈接生成助手來創建自動關聯到當前控制器的某個方法的 <a> 標簽

@Html.ActionLink 標簽有三個參數，分別是 <a> 標簽的顯示文本，當前控制器下的動作 ( action ) 和其它的附加參數組成的一個對象

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

@model HomePageViewModel @{ViewBag.Title = "Home 控制器下的 Index 方法"; } <h1>歡迎!</h1> <div>這個消息來自 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>

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

如果點擊鏈接 1，則輸出如下

HTML 助手

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

這樣看起來更直觀也更統一

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

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

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

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

好吧，我們繼續對 Index.cshtml 進行改造吧，改造完成后代碼如下

@model HomePageViewModel @{ViewBag.Title = "Home 控制器下的 Index 方法"; } <h1>歡迎!</h1> <div>這個消息來自 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>

刷新瀏覽器，輸出結果如下

在實際的項目中，無論你選擇哪種，都是可以的，這是個人的愛好

但對于團隊而言，我們建議做一個統一的規定，不然同時出現會造成閱讀困難

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。