除了Web API,ASP.NET Core 還有提供了MVC的架構提供選擇,其中與Web API最大的差異就是提供了Views做為網站畫面顯示。
ASP.NET Core MVC 的 Views 提供了許多讓開發人員便利的功能:Razor語法、Tag Helpers、View Components...等等,副檔名為cshtml
的檔案,會透過伺服器做渲染,轉換成HTML供瀏覽器顯示。
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語法中,如果想要輸出@符號,就必須使用@@,才能輸出@的符號。
ASP.NET Core MVC & Razor Page 提供了 Tag Helpers,讓使用者可以用更貼近原生HTML的方式來操作View。
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藉由新增新的屬性,來增強標準 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>
可以透過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>
可以將指定內容進行快取,並設定快取細節,以提升網站效能
能夠調整細節的屬性如下
屬性 | 作用 |
---|---|
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>
透過此 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時更得心應手!
Partial View 是將畫面中的局部內容抽出建立成獨立檔案,並在需要的地方引入,可以用於容易重複或是複雜的內容切割作為元件。
Partial View可以透過Razor中的HTML Helper,在畫面中 同步/非同步 引入內容
使用範例
@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 適合使用的時機點
不管是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