標籤協助程式 - Tag Helpers

ASP.NET Core Web 應用開發–使用 MVC 框架 / PART II MVC 的細節 / 標籤協助程式 - Tag Helpers

ASP.NET Core 導入標籤協助程式 - Tag Helpers,檢視檔案中,可以透過標籤協助程式(Tag Helpers)的設定,利用 C# 動態維護 HTML 標籤元素的生成與調整,這種功能讓動態建立網頁的過程更為彈性,同時透過屬性的設定即可完成,避免Razor 語法

標籤協助程式由 Microsoft.AspNetCore.Mvc.TagHelpers 組件提供所需的支援,由於其為選擇性功能,使用之前必須先確認專案允許此功能的使用,而具有 Razor 頁面的應用專案已經預先完成這一部份的設定,開啟MVC專案的 Views/_ViewImports.cshtml 檔案,可以看到以下的內容:

@using RazorPagesDemo
@namespace RazorPagesDemo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

指令 @addTagHelper 緊接著「*」表示將 Microsoft.AspNetCore.Mvc.TagHelpers 組件中所有的標籤協助程式元件加入至目前專案。

針對目前的 HTML 標籤,ASP.NET 內建相對應的標籤協助程式,方便開發人員建立Razor 頁面,每一個標籤協助程式是以 asp- 為字首命名,並以屬性的型態配置於目標標籤中,例如針對 <a> 標籤行為的 asp-page,考慮以下的配置:

<a asp-page="Hello">Hello</a>

這會建立一個顯示名稱為 Hello 的連結如下:

<a href="/Hello">Hello</a>

這是非常簡單的例子,相較直接設定 HTML 屬性 href ,這裏看不出來有其它額外的好處,不過標籤協助程式可以透過後端程式化控制,適合進行更彈性的頁面功能開發,以下來看看相關的設計。

表單

建立表單所使用的 <form> 可以以透過 form 標籤協助程式建立,以下是需要的語法:

 <form asp-controller=cn asp-action=an method="post">
    
 </form>

直接配置 <form>,設定asp-controller屬性,表示要傳送要求的目標控制器,cn表示控制器名稱,而asp-action屬性則是動作方法,an指定為動作方法名稱。

現在於FormController.cs檔案裏面,新增測試動作方法如下:

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

新增此動作方法的對應檢視檔案TagHelper.cshtml,配置如下的內容:

特別注意asp-controller屬性值設定為Form,而asp-action屬性值則是Hello,因此要求會傳送至FormController中的Hello動作方法中。以下來看檢視檔案轉換為網頁的結果以及對應的原始碼:

左載圖是呈現的表單畫面,右載圖是對應的願始碼,其中 <form> 的action屬性是TagHelper.cshtml裏面asp-controller 與asp-action兩個設定組合轉換的結果。



沒有留言: