iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 18
0
Modern Web

我與 ASP.NET Core 的 30天系列 第 18

[Day18] Views - 我與 ASP.NET Core 3 的 30天

除了Web API,ASP.NET Core 還有提供了MVC的架構提供選擇,其中與Web API最大的差異就是提供了Views做為網站畫面顯示。
ASP.NET Core MVC 的 Views 提供了許多讓開發人員便利的功能:Razor語法、Tag Helpers、View Components...等等,副檔名為cshtml的檔案,會透過伺服器做渲染,轉換成HTML供瀏覽器顯示。

Razor 語法

Razor 語法支援C#,並使用 @ 符號從 HTML 轉換成 C#。Razor 評估 C# 運算式,並在 HTML 輸出中加以呈現。
當 @ 符號後面接著 Razor保留關鍵字時,它會轉換為 Razor 特定的標記。否則會轉換成一般 C#。

<p>現在時間:@DateTime.now.ToString("yyyy-MM-dd hh:mm:ss")</p>
<p>上禮拜的現在:@(DateTime.Now - TimeSpan.FromDays(7))</p>

在cshtml中輸入上方語法,可以得到以下結果:
現在時間:2020-10-02 10:40:51
上禮拜的現在: 2020/9/25 下午10:40:51

透過Razor語法可以使用C#語法,但是中間不能有空格,如果有空格則為判別為不是繼續使用Razor語法,所以在上面的範例,我們透過()將我們需要使用的語法包起來,以此來判別是同一個需要運算的區間。
Razor語法還可以增加程式碼區段,透過@{}將運算式包在一個區段,在一個cshtml中的程式碼區段和運算式會共用相同的範圍並依序定義

@{
    var name = "ATai";
}

<p>@name</p>

@{
    name = "Xiang";
}

<p>@name</p>

輸出的結果就會為
ATai
Xiang

Razor語法也可以使用迴圈以及條件式的判斷

迴圈:

@for (var i = 0; i < members.Length; i++)
{
    var member = members[i];
    <text>Name: @member.Name</text>
}

條件式判斷:

@if (name == "ATai")
{
    <p>VIP</p>
}
else
{
    <p>一般遊客</p>
}

在Razor語法中,如果想要輸出@符號,就必須使用@@,才能輸出@的符號。

Tag Helpers

ASP.NET Core MVC & Razor Page 提供了 Tag Helpers,讓使用者可以用更貼近原生HTML的方式來操作View。

內建的 ASP.NET Core Tag Helpers

Anchor Tag Helper
Cache Tag Helper
Component Tag Helper
Distributed Cache Tag Helper
Environment Tag Helper
Form Tag Helper
Form Action Tag Helper
Image Tag Helper
Input Tag Helper
Label Tag Helper
Link Tag Helper
Partial Tag Helper
Script Tag Helper
Select Tag Helper
Textarea Tag Helper
Validation Message Tag Helper
Validation Summary Tag Helper

以下介紹幾個常用的Tag Help用法

Anchor Tag Helper:

Anchor Tag Helper藉由新增新的屬性,來增強標準 HTML Anchor (<a ... >) 標籤。 依照慣例,屬性名稱的開頭會加上 asp-。 所轉譯Anchor元素的 href 屬性值取決於 asp- 屬性的值。
asp-* 有以下屬性

屬性 作用
asp-controller 用於產生 URL 的 Controller
asp-action 產生 href 屬性中包含的Action的名稱,如果沒有指定Controller,則會預設為當頁面所屬的Controller
asp-route-{value} 用於產生路由參數,{value}可以替代成任意的參數名稱,例如預設的參數是id,屬性就會為asp-route-id
asp-route 用於產生相對應名稱路由的 URL(有套用[Route]屬性,並給予Name的Action)
asp-all-route-data asp-all-route-data
asp-fragment 設定的內容會以#後面加上內容,帶入URL中
asp-area 設定Area名稱
asp-protocol 用於在 URL中指定通訊協定
asp-host 在URL指定主機名稱
asp-page 將href指定到Razor Page的頁面
asp-page-handler 搭配Razor Page使用,會連接到Razor Page的指定方法

範例:
<a asp-controller="Home" asp-action="Index">首頁</a>
<a asp-controller="Member" asp-action="Detail" asp-route-id="@Model.MemberId">用戶Id: @Model.MemberId</a>

會輸出的結果為
<a href="/">首頁</a>
<a href="/Member/Detail/5">用戶Id:5</a>

Form Tag Helper

可以透過asp-controller、asp-action、asp-page...等等屬性產生指定路徑的表單,且會在表單中產生隱藏的防跨站攻擊的Token
例如:

<form asp-controller="Member" asp-action="Register" method="post">
...
</form>

會輸出HTML:

<form method="post" action="/Member/Register">
...
<input name="__RequestVerificationToken" type="hidden" value="<Token Value>">
</form>

Cache Tag Helper

可以將指定內容進行快取,並設定快取細節,以提升網站效能
能夠調整細節的屬性如下

屬性 作用
enabled 決定是否快取標籤內的內容,預設值為True(快取不會被清除)
expires-after 指定快取多久之後到期
expires-on 明確指定快取到期時間
expires-sliding 設定多久未被使用快取就會到期
expires-priority 設定快取優先權,優先權越高的會越慢被回收,有High、Low、Normal、NeverRemove四個等級
vary-by-* 可依據指定的參數自動產出獨立的快取物件,可以指定的參數有cookie、header、query、route、user或是賦予string的值

範例為設定十秒後到期的Cache,顯示內容為現在時間

<cache expires-after="TimeSpan.FromSeconds(10)">@DateTime.Now</cache>

Environment Tag Helper

透過此 Tag Helper可以設定相關環境要使用的資源

<environment names="Development">
    <link rel="stylesheet" href="~/css/dev.css" />
</environment>

<environment names="Test, Production">
    <link rel="stylesheet" href="~/css/test_prod.css" />
</environment>

Tag Helper不只能讓使用者用熟悉的html語法來撰寫前端,且還提供許多了方便好用的功能,善加利用絕對可以在使用Razor Page或是MVC開發View時更得心應手!

Pratial View

Partial View 是將畫面中的局部內容抽出建立成獨立檔案,並在需要的地方引入,可以用於容易重複或是複雜的內容切割作為元件。
Partial View可以透過Razor中的HTML Helper,在畫面中 同步/非同步 引入內容

  • @Html.Partial
  • @Html.PartialAsync
  • @Html.RenderPartial
  • @Html.RenderPartialAsync

使用範例

@await Html.PartialAsync("_PartialName")
@await Html.PartialAsync("/Views/資料夾名稱/_PartialName.cshtml")

也可以使用Tag Helper來引入,使用Tag Helper預設就是以非同步的方式載入Partial View

<partial name="_PartialName" />
<partial name="/Views/Folder/_PartialName.cshtml" />

Partial View 適合使用的時機點

  • 要將較大的Razor檔案(.cshtml)的內容拆分成比較小的組件
  • 要減少每個Razor檔案(.cshtml)之間的內容重複

結論

不管是MVC的View或是Razor Page,畫面都是透過Server端渲染完將結果以HTML的格式提供給瀏覽器做顯示,,也因為這樣,如果邏輯複雜或是有多筆迴圈時,就會對Server及傳輸的部分造成負擔,如果畫面互動及邏輯較為複雜,還是建議使用SPA(Single Page Application)搭配Web API,但是如果需求較為簡單且有需要顧慮到SEO(搜尋引擎最佳化)就建議使用這種方式來處理畫面。

參考資料
ASP.NET Core built-in Tag Helpers
Partial views in ASP.NET Core
View components in ASP.NET Core


上一篇
[Day17] Serilog & Seq 為你打造良好的Log管理環境- 我與 ASP.NET Core 3 的 30天
下一篇
[Day19] 跨網站腳本攻擊(XSS) - 我與 ASP.NET Core 3 的 30天
系列文
我與 ASP.NET Core 的 30天31

尚未有邦友留言

立即登入留言