當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

ASP.NET Core中的TagHelper及其用法

發布時間：2023/12/18 asp.net 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 ASP.NET Core中的TagHelper及其用法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

TagHelper
導入內置的TagHelper
- 使用TagHelper生成Link鏈接🔗
- TagHelper中的Link標簽🗒
為什么要使用TagHelper
- 使用TagHelper的優勢
Image TagHelper
- 瀏覽器緩存
- 禁用瀏覽器緩存
- HTTP狀態碼的200與302
- ASP.NET Core中的Image TagHelper
ASP.NET Core中的Environment TagHelper
- 設置應用程序環境的名稱
- 如果CDN“掛了”，怎么辦
使用Bootstrap給項目添加導航菜單
- 布局頁面_Layout.cshtml的代碼
Form TagHelpers 提交學生信息
- 場景描述
- Form TagHelper
- Input TagHelper
- Label TagHelper
- Select TagHelper
- Create.cshtml中基本的HTML代碼
- Bootstrap優化后的Create.cshtml的代碼

TagHelper

標記幫助程序（TagHelper）是ASP.NET Core中的新增功能。

? 首先通過一個例子來理解TagHelper及其用途。

? TagHelper是服務器端組件。它們在服務器上運行，并在Razor文件中創建和渲染HTML元素。如果對以前版本的ASP.NET Core MVC有一定了解，那么讀者可能也知道HTML TagHelper。TagHelper類似于HTML TagHelper，ASP.NET Core有許多內置的TagHelper用于常見任務，比如生成鏈接、創建表單和加載數據等。TagHelper的出現可幫助提高生產效率，并生成更穩定的、可靠和可維護的代碼。

導入內置的TagHelper

? 要在整個應用程序中的所有視圖使用內置TagHelper，需要在_ViewImports.cshtml文件導入TagHelper。要導入TagHelper，我們使用@addTagHelper指令。

@addTagHelper *.Microsoft.AspNetCore.Mvc.TagHelpers

? 通配符*表示我們要導入MVC中所有的TagHelper，而Microsoft.AspNetCore.Mvc.TagHelpers則是內置TagHelper的組件位置。

使用TagHelper生成Link鏈接🔗

? 假設要查看指定學生的詳細信息，則要生成以下超鏈接。數字5是我們要查看其詳細信息的學生的ID。

/home/details/5

? 我們可以通過多種方式在Razor視圖中實現該效果。

手動生成鏈接

@foreach (var student in Model) {<a href="/home/details/@student.ID">查看</a> }

使用HTML TagHelper

@Html.ActionLink("查看","details",new {ID = student.ID})生成結果Link元素<a href="/home/details/5">查看</a>或者@Url.Action("details","home",new{ID=student.Id})

? 生成的結果：/home/details/5。👀

使用TagHelper

TagHelper中的Link標簽🗒

? TagHelper中的Link標簽通過添加新屬性來增強標準的HTML標簽，以下TagHelper均可以增強Link標簽的href屬性值。

asp-controller asp-action asp-route-{value}

? 正如名稱所表示的那樣，asp-controller指定控制器名稱，而asp-action指定要包含在生成的href屬性值中的操作方法名稱。asp-route-{value}屬性用于在生成的href中包含路由數據屬性值。{value}可以替換為路由參數，比如id。參考以下代碼：

? 生成結果： <a href="/home/details/5">查看</a> 。

? 從下面的代碼中可以看出，手動生成的鏈接比使用HTMLHelper或TagHelper要容易得多。

? 讀者可能產生一個疑問：為什么我們要使用TagHelper或HTML Helper來生成這些鏈接，而不是手動生成？我們將在下文回答這個問題。

為什么要使用TagHelper

? 讓我們通過一個簡單的例子來理解TagHelper的優勢。

? 假設我們想要查看特定的學生的詳細信息，則需要生成超鏈接，比如學生ID為5的詳細信息。

/home/details/5

? 我們可以通過手動編寫，如下：

? 也可以使用Link鏈接的TagHelper，代碼如下：

使用TagHelper的優勢

? TagHelper是根據應用程序的路由模板生成的鏈接，這意味著如果我們更改路由模板，則TagHelper生成的鏈接會針對路由模板所做的更改自動修改和適配，讓生成的鏈接正常工作。

? 而如果我們手動硬編碼了URL，則當應用程序路由模塊發生變化時，就必須在很多地方更改代碼，這樣效率并不高。

? 可以通過一個例子來理解這一點。

app.UseEndpoints(endpoints=>{endpoints.MapControllerRoute(name:"default",pattern:"{controller=Home}/{action=Index}/{id?}");});

? 以下代碼沒有用TagHelper，而是對URL路徑進行硬編碼。

以下代碼是使用<a>元素的TagHelper完成的。

? 請注意，我們沒有針對URL路徑進行硬編碼，只指定控制器和操作方法的名稱，以及路由參數及其值。在服務器上執行TagHelper時，它們會查看路由模板并自動生成正確的URL。

? 上述兩種方法都會生成正確的URL路徑(/home/details/5)，它適用于當前路由模板({controller=Home}/{action=Index}/{id?})。

? 現在讓我們改變路由模板，代碼如下。請注意，在URL中有字符串pragim。

app.UseEndpoints(endpoints=>{endpoint.MapControllerRoute(name:"deafault",pattern:"pragim/{controller=Home}/{action=Index}/{id?}");});

? 請注意，不要忘記刪除HomeController中屬性路由的屬性，否則項目還是會正常進入Home/Index的路徑中。當讀者運行項目發生404錯誤的時候，記得添加pragim域信息和正確的URL訪問路徑http://localhost:2051/pragim。編譯并運行項目，使用TagHelper生成的代碼是正確的鏈接。

<a href="/pragim/home/details/1">查看</a>。 //其中未使用TagHelper的代碼則沒有變化，缺少URL路徑“/pragim” <a href="/home/details/1">查看</a>

? 我們還有其他TagHelper，它可以生成表單。將此表單發回服務器時，將自動處理發布的值并顯示相關的驗證信息。如果沒有這些TagHelper，我們將不得不編寫大量自定義代碼來實現相同的功能。

? 如果此時讀者覺得沒有多大意義，請耐下心來。我們會在后面創建學生信息的時候討論表單的TagHelper。

Image TagHelper

? 在開始說Image標記幫助程序的好處之前，我們先驗證一下普通元素的問題。

? 準備好兩個圖片文件，一個名為noimage.png，另一個名為noimage1.png，把它們存儲在wwwroot/images文件夾中。現在正常運行項目，如圖所示。

? 接下來回到項目中，將noimage.png重命名為noimage2.png。然后將noimage1.png重命名為noimage.png。再次刷新頁面會發現沒有變化，打開開發者工具可以發現，返回的HTTP Code:200 OK(from memmory cache)是從緩存中得到的，如圖所示。

? 這樣帶來的問題是用戶會認為我們的程序出問題了，那么怎么解決？

瀏覽器緩存

? 當訪問網頁時，大多數瀏覽器會緩存該網頁的圖片，這樣再次訪問該頁面時，瀏覽器就不用從Web服務器下載相同的圖片，而是從緩存中提取。在大多數情況下，這不是問題，因為圖片不會經常發生改變，但是這對開發人員來說相當不友好。

禁用瀏覽器緩存

? 由于某種原因，如果讀者不希望瀏覽使用器緩存，則可以禁用它。比如，要在Google Chrome中禁用緩存，步驟如下：

按F12，啟動Browser Developer Tools。
單擊NetWork選項卡。
選中DIsable cache復選框。如圖所示。

? 禁用瀏覽器緩存后，會帶來一個明顯的問題，那就是每次訪問該頁面時都必須從服務器下載圖片，要記得平時關閉禁用緩存。

? 現在刷新瀏覽器，新的圖片就會加載出來了。

HTTP狀態碼的200與302

? HTTP狀態碼是用于表示網頁服務器HTTP響應狀態的3位數字代碼。狀態碼的第一個數字代表響應的5中狀態之一，這里我們只介紹涉及的3xx和2xx系列。

? 2xx系列代表請求已成功被服務器接收、理解并接受，這系列中常見的200狀態碼和201狀態碼。

200狀態碼：表示請求已成功，請求所希望的響應頭或數據體將隨此響應返回。
201狀態碼：表示請求成功，服務器創建了新的資源，并且其URI已經隨Location請求頭信息返回。假如需要的資源無法及時建立的話，應當返回202Accepted。

? 3xxx系列代表需要客戶端采取進一步的操作才能完成請求，這些狀態碼用來重定向，后續的請求地址（重定向目標）在本次響應的Location域中指明。這系列中常見的有301狀態碼和302狀態碼。

301狀態碼：被請求的資源已永久移動到新位置。服務器返回此響應（對GET請求或HEAD請求的響應）時，會自動將請求者轉到新位置。
302狀態碼：請求的資源臨時從不同URI響應請求，但請求者應繼續使用原有位置來進行以后的請求。

簡單來說：3xx系列表示請求的是客戶端，而2xx系列表示請求的是服務器端。

ASP.NET Core中的Image TagHelper

? 從性能角度來看，只有在服務器上更改了圖片才能對其進行下載。如果圖片未更改，請使用瀏覽器中緩存的照片。這意味著我們將擁有兩全其美的優勢。

? Image TagHelper可以幫助我們實現這一效果。要使用Image TagHelper，請包含asp-append-version屬性并將其設置為true。

? 現在我們回到項目中，打開Index.cshtml和Details.cshtml并對它們進行修改，代碼如下。

? Image TagHelper增強了img標簽屬性，為靜態圖像文件提供了緩存清楚行為，通過散列計算生成唯一的散列值并將其附加到圖片的URL中。唯一的散列值會提示客戶端（或某些代理）從服務器重新加載圖片，而不是從瀏覽器的緩存中重新加載。以下是生成的代碼。

? 只有當每次服務器上的圖片更改時，才會計算并緩存新的散列值。如果圖片未更改，則不會重新計算散列值。使用此散列值，瀏覽器會跟蹤服務器上的圖片內容是否已更改。使用Image TagHelper可以幫助我們解決很多由潛在因素造成的問題。

ASP.NET Core中的Environment TagHelper

? 我們在ASP.NET Core應用程序開發過程中使用了Bootstrap。為了便于調試，希望在本地開發計算機（在開發環境中）通過應用程序加載沒有壓縮的Bootstrap的CSS文件（bootstrap.css）。而在Staging、Production或除Development環境以外的任何其他環境中，希望應用程序能從CDN(內容分發網絡)加載壓縮后的Bootstrap的CSS文件(bootstrap.min.css)以獲得更好的性能。

? 但是，如果CDN出現故障或者出于某種原因，當應用程序無法訪問CDN的時候，我們希望應用程序不要訪問CDN，并從應用程序Web服務器加載壓縮后的Bootstrap文件。

? 很多開發框架都有這種功能，現在我們可以使用ASP.NET Core Environment TagHelper輕松實現這一點。在我們理解Environment TagHelper之前，我們先來了解如何設置應用程序環境的名稱。

設置應用程序環境的名稱

? Environment TagHelper支持根據應用程序環境呈現不同的內容，它使用ASPNETCORE_ENVIRONMENT變量的值作為環境的名稱。

? 如果應用程序時Development ，則此示例加載沒有壓縮的bootstrap.css文件，代碼如下：

? 如果應用程序環境是Staging或者Production，則此示例從CDN加載壓縮后的bootstrap.min.css文件，代碼如下。

? include屬性接受將單個環境名稱以逗號分隔的形式生成列表。在Environment TagHelper中還有exclude屬性，當托管環境與exclude屬性值中列出的環境名稱不匹配時，將呈現標簽中的內容。

? 如果應用程序不是Development，則從此示例從CDN加載壓縮后的bootstrap.min.css文件，代碼如下：

? <link>元素中的integrity屬性用于檢查子資源完整性。Subresource Integrity(SRI)是一種安全功能，允許瀏覽器檢查被檢索的文件是否被惡意更改。當瀏覽器下載文件時，它會重新計算散列值并將其與完整性屬性散列值進行比較。如果散列值匹配，則瀏覽器允許下載文件，否則將被阻止。

如果CDN“掛了”，怎么辦

? 如果CDN出現故障或出于某種原因應用程序無法訪問CDN，則希望應用程序從應用程序Web服務求加載壓縮后的Bootstrap文件，代碼如下。

? 如果應用程序環境是Development，則從應用程序Web服務器加載沒有壓縮的bootstrap.css文件；如果應用程序環境不是Development，則從CDN加載縮小的bootstrap.min.css文件。

? 使用asp-fallback-href屬性指定回退源。這意味著，如果CDN關閉，則應用程序將回退并從應用程序Web服務器加載縮小的Bootstrap文件。

? 以下3個屬性及其相關值用于檢查CDN是否關閉。

asp-fallback-test-calss="sr-only"。
asp-fallback-test-propery="position"。
asp-fallback-test-value="absolute"。

當然，這會設計計算散列值，并將其與文件的完整性屬性散列值進行比較。對于大多數應用程序，CDN失效的時候都是回退到它們自己的服務器，方法是將asp-suppress-fallback-integrity屬性設置為true，當然讀者也可以選擇關閉從本地服務器下載的文件完整性檢查。

使用Bootstrap給項目添加導航菜單

? ?請注意，Bootstrap的所有Javascript插件都依賴于jQuery，因此jQuery必須在Bootstrap之前引入。讀者可以使用Libman管理工具下載jQuery，也可前去jQuery官網下載。

布局頁面_Layout.cshtml的代碼

<!DOCTYPE html><html> <head><meta name="viewport" content="width=device-width" /><environment include="Development"><link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" /><script src="~/lib/jquery/jquery.js"></script><script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script></environment><environment exclude="Development"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" asp-fallback-href="~/lib/twitter-bootstrap/css/bootstrap.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="positon" asp-fallback-test-value="absolute" asp-suppress-fallback-integrity="true" /></environment><link href="~/css/site.css" rel="stylesheet" /><title>@ViewBag.Title</title> </head> <body><div class="container"><nav class="navbar navbar-expand-sm bg-dark navbar-dark"><a class="navbar-brand" asp-controller="home" asp-action="index"><img src="~/images/student.png" width="30" height="30" /></a><button class="navbar-toggler"type="button"data-toggle="collapse"data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="collapsibleNavbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" asp-controller="home" asp-action="index">列表</a></li><li class="nav-item"><a class="nav-link" asp-controller="home" asp-action="create">創建</a></li></ul></div></nav>@RenderBody()</div>@if (IsSectionDefined("Scripts")){@RenderSection("Scripts", required: false)} </body> </html>

? 注意，對于非開發環境（Staging 、Production等），我們沒有使用所需的<link>元素來從CDN加載所需的Jquery和Bootstrap Javascript文件。

? 請注意，按鈕（查看、編輯、刪除）是相互連接在一起的，我們要在這些按鈕之間包含邊框，需使用Bootstrap提供的邊距類（m-1、m-2等）。在類名中，m代表邊距，數字1、2等代表所需空間的大小。

? 在Index.cshtml修改\<a>元素，使其包含m-1。

Form TagHelpers 提交學生信息

場景描述

我們在ASP.NET Core中使用以下常用的TagHelpers創建表單。

Form TagHelper。
Label TagHelper。
Input TagHelper。
Selece TagHelper。
Textarea TagHelper。
Validation TagHelper。

我們希望使用Form TagHelpers創建表單，并使用Bootstrap對其進行樣式設置，完成創建學生信息。

? 我們在HomeController中添加如下代碼。

public IActionResult Create(){return View();}

然后在路徑為Views/Homes/的文件夾中添加視圖Create.cshtml。

Form TagHelper

? 要創建表單可以使用Form TagHelper。需要注意的是，我們實際是使用asp-controller和asp-action TagHelper。這兩個TagHelper指定控制器并在提交表單時將表單數據發布到指定的操作方法上。我們希望在提交表單時發出POST請求，因此將method屬性設置為post。

? 從客戶端瀏覽器上呈現表單時，上面的代碼會生成以下HTML代碼。正如讀者在提交表單時從生成的HTML代碼中看到的那樣，它將被發布到HomeController的Index()方法中，編譯后打開源代碼可以看到渲染出來的HTML代碼。

? 請注意，默認情況下在提交表單時，它將被發布到當前頁面表單的控制器的操作方法中。這意味著，即使我們沒有使用asp-controller和asp-action TagHelper指定對應的控制器和操作方法，表單仍然被發布到HomeController的Index()方法中，但是建議寫的時候還是顯示聲明。

Input TagHelper

? Input TagHelper將HTML中的<input>元素綁定到Razor視圖中的模型表達式。

? 在我們的例子中想要設計一個表單來創建新學生信息。因此，Create.cshtml視圖的模型是Student類，需要使用@model 指令，即@model Student 。

? 為了獲取學生姓名，我們需要一個文本框并將其綁定到Student模型類的Name屬性。我們使用asp-for TagHelper將input的屬性值設置為Student模型類的name屬性。

? 請注意，Visual Studio會提供智能提示。如果在Student類上將屬性名稱Name更改為FullName，但不更改分配給的TagHelper的值，則會出現編譯器錯誤。

? 上面的代碼會生成一個帶有id和name屬性的<input>元素。請注意，它們的值均為Name。

? name屬性是必須的，它用于在提交表單時將輸入元素的值映射到模型類的對應屬性。這是通過ASP.NET Core中稱為模型綁定的過程完成的。

Label TagHelper

? Label TagHelper會生成帶有for屬性的標簽。屬性鏈接與和它相關的輸入元素的標簽進行綁定，代碼如下。

上面的代碼生成以下HTML代碼：

? Label標簽鏈接到input標簽，因為這兩種標簽的屬性和input標簽的id屬性具有相同的值（Name）。

? 同樣，以下代碼生成<label>和<input>元素以獲取學生的電子郵箱。

Select TagHelper

? Select TagHelper會生成select標簽及其關聯的元素。在我們的例子中需要通過select顯示主修科目列表。最后，我們需要一個select標簽和一個帶有主修科目選項列表的元素，如下所示。

? 主修科目的元素的選項內容可以像上面的示例中那樣進行硬編碼，也可以來自枚舉或數據庫表。我們還沒有連接數據庫，因此，對于我們的示例可以從枚舉中獲取選項。

? 我們在Models/EnumTypes的文件夾中創建一個MajorEnum.cs枚舉類。

public enum EnumTypes{None,FirstGrade,SecondGrade,GradeThree}

? 修改Models文件夾中Student.cs文件的代碼，將Major屬性數據類型改為MajorEnum。在Create.cshtml視圖中添加以下代碼。

? 請注意，我們使用asp-items屬性值幫助程序和Html.GetEnumsSelectList<MajorEnum>()獲取<select>元素的選項。

? 上面的代碼生成以下HTML代碼。

<label for="Major">Major</label> <select data-val="true" data-val-required="The Major field is required." id="Major" name="Major"><option value="0">None</option><option value="1">FirstGrade</option><option value="2">SecondGrade</option><option value="3">GradeThree</option> </select>

Create.cshtml中基本的HTML代碼

@model Student @{ ViewBag.Title = "創建學生信息"; }<form asp-controller="home" asp-action="create" method="post" ><div><label asp-for="Name" ></label> <input asp-for="Name"/></div><div><label asp-for="Email"></label><input asp-for="Email"/></div><div><label asp-for="Major"></label><select asp-for="Major"asp-items="Html.GetEnumSelectList<MajorEnum>()"><option value="">請選擇</option></select></div><button type="submit">創建</button> </form>

? 以上的代碼會生成以下的HTML代碼。

<form method="post" action="/home/create"><div><label for="Name">Name</label><input type="text" id="Name" name="Name" value="" /></div><div><label for="Email">Email</label><input type="text" id="Email" name="Email" value="" /> </div><div><label for="Major">Major</label><select data-val="true" data-val-required="The Major field is required." id="Major" name="Major"><option value="">請選擇</option><option value="0">None</option><option value="1">FirstGrade</option><option value="2">SecondGrade</option><option value="3">GradeThree</option> </select> </div><button type="submit" class="btn btn-primary">創建</button><input name="__RequestVerificationToken" type="hidden" value="CfDJ8IVmefmn13tElsuhIOlxBd9qxTAKjc5MLl_DnUHtxiZb-ztIjcXBKCtrVcKqrDEmn17EthiSYdJ8fxT6emkGJopOw5HrMAKYZOEg-4khyt_WLv8rEhhTqGLRm73T8eS1Lx8RcxZJ_jnEQEVwulC-eC4" /> </form>

運行后效果如圖所示：

? 這就是基本的HTML代碼生成的效果，這里功能是有了，但是美化并不好，因此要對它進行優化。現在使用Bootstrap進行優化。

Bootstrap優化后的Create.cshtml的代碼

@model Student @{ ViewBag.Title = "創建學生信息"; }<form asp-controller="home" asp-action="create" method="post" class="mt-3"><div asp-validation-summary="All" class="text-danger"></div><div class="form-group row"><label asp-for="Name" class="col-sm-2 col-form-label"></label><div class="col-sm-10"><input asp-for="Name" class="form-control" placeholder="請輸入名字" /><span asp-validation-for="Name" class="text-danger"></span></div></div><div class="form-group row"><label asp-for="Email" class="col-sm-2 col-form-label"></label><div class="col-sm-10"><input asp-for="Email" class="form-control" placeholder="請注入郵箱地址" /><span asp-validation-for="Email" class="text-danger"></span></div></div><div class="form-group row"><label asp-for="Major" class="col-sm-2 col-form-label"></label><div class="col-sm-10"><select asp-for="Major"class="custom-select mr-sm-2"asp-items="Html.GetEnumSelectList<MajorEnum>()"><option value="">請選擇</option></select><span asp-validation-for="Major" class="text-danger"></span></div></div><div class="form-group row"><div class="col-sm-10"><button type="submit" class="btn btn-primary">創建</button></div></div></form>

運行后，效果如圖所示：

? 至此，我們的Create頁面做完了。雖然是一個簡單的頁面，但我們用到的組件一點也不少。

總結

以上是生活随笔為你收集整理的ASP.NET Core中的TagHelper及其用法的全部內容，希望文章能夠幫你解決所遇到的問題。

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