iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
1
自我挑戰組

後端或是ASP.NET Core的學習筆記系列 第 19

第19天:Tag Helpers標籤協助程式

我們在View中所撰寫的cshtml,其中使用C#語法的部分會被Razor轉譯之後,輸出成HTML
而從ASP.NET Core開始,Razor提供了標籤協助程式Tag Helpers,可以讓我們使用像是原生HTML的方式把C#資料轉換成HTML,使程式碼閱讀上不會有明確得C#語法與HTML穿插於程式碼中的感覺。

例如我們想把Product.cs的Name欄位透過的HTML<label>元素顯示,在舊的ASP.NET MVC中只能使用HTML Helper的方式來撰寫。
例如:

@model Product

@Html.LabelFor(m=>m.Name)

Razor透過以上語法來轉譯成HTML如下

<label for="Name">Name</label>

而ASP.NET Core除了上述寫法之外,也可以改用Tag Helpers方式來撰寫

@model Product

<label asp-for="Name"></label>

透過以上語法來轉譯成HTML,如下

<label for="Name">Name</label>

你可能會覺得兩者打字的字數差不多,但是更進一步地,若你需要對label的樣式進行修改,那麼HTML Helper會更加麻煩,而使用Tag Helpers只要當成HTML的寫法就好,如下

@Html.LabelFor(m=>m.Name, new {@class="text-primary"})

<label asp-for="Name" class="text-primary"></label>

使用Tag Helpers比原本的HTML Helper用法更加簡單易懂,而且使用Tag Helpers在Visual Studio可以得到IntelliSense的提醒,更不容易打錯。


上一篇
[影片]第18天:完成資料驗證功能
下一篇
第20天:使用ASP.NET Core DI取得appsettings.json 組態設定檔字串
系列文
後端或是ASP.NET Core的學習筆記30

尚未有邦友留言

立即登入留言