[C#][.NET]ASP.NET Core MVC RAZOR 整理

環境與版本

作業系統：Window10 64x 版本：2004

開發軟件(IDE)：Visual Studio 2019 Community

.NET版本：ASP.NET Core 3.1

專案架構：MVC

Razor

Razor 又稱Razor Syntax，是用來將Server Side 的C#程式嵌入到HTML 中的標記語法（Markup Syntax）。

說明：

1. Razor 中只有HTML 及C#兩種元素，二者的結合就形成了Razor
   語法。
2. C#程式區塊（Razor Code Block）是以@{…}包覆，裡面是一
   般C#程式。
3. Razor Inline 表達式是指「C#變數穿插在HTML 中」的式子。而
   Razor 中預設是HTML 語言，若遇到@符號，表示它後面接的是
   C#指令。
4. Razor 會依不同的規則或符號在HTML 和C#之間做切換。

Razor 支援的保留關鍵字，分為兩大類：

1. Razor 關鍵字：section、model、helper、inherits 和functions 五個
   關鍵字是Razor 創造的，用來支持Razor 語法所需功能。
2. C#關鍵字：這是源自既有的C#，不是Razor 所創造。Razor 支援
   常用的C#關鍵字，但有些如namespace 及class 關鍵字就不支援。

Razor 語法規則

規則1：以@符號作為C#的開頭

規則2：以@{…}宣告單行C#程式

@{ var City = "Taipei"; }
@{ var PostalCode = 110; }
@{ string city = "Taoyuan"; }
@{ int postalCode = 334; }

規則3：以@{…}宣告多行C#程式

@{
var Name = "Kevin";
var Height = 180;
var Weight = 75;
}

規則4：C#的Inline 表達式

<p>我的名字: @Name </p>
<p>我的身高: @Height </p>
<p>我的體重: @Weight </p>
<p>居住城市: @City </p>
<p>郵遞區號: @PostalCode </p>

規則5：C#程式區塊中的HTML 隱式轉換

@{…}程式區塊中預設語言是C#，但若夾雜了HTML 語法，Razor
會自動做隱式轉換，將該部分輸出成HTML

規則6：C#關鍵字嚴格區分大小寫（但VB 不分）

規則7：單行註解－@…@

規則8：多行註解－@…@

規則9：Razor 隱性表達式－@符號

規則10：Razor 明確表達式－@(…)符號

規則11：以文字顯示@符號，需用@@表示

規則12：字串變數中的雙引號顯示

規則13：用@(…)將HTML 或JS 編碼成純文字

規則14：用@Html.Raw()顯示原始字串, 不做HTML 編碼

以@helper 指示詞建立可重複使用的Razor Helper

Razor Helper 是將一段HTML 或Razor 語法獨立成可重複使用的區
塊，方式是在View 中以@helper 關鍵字來宣告。

Razor Helper 在結構及使用上，跟C# Method 很像，只不過
前者在Razor 頁面中宣告，後者在Class 類別中宣告。

範例：

<table class="table table-bordered table-striped">
...
<tbody>
@foreach (var m in Model)
{
...
<!--中文-->
@DisplayScore(m.Chinese)
<!--英文-->
@DisplayScore(m.English)
<!--數學-->
@DisplayScore(m.Math)
<!--計算總分-->
@if (m.Id == ViewBag.topId)
{
<!--總分最高者-->
<td class="top1">@Html.DisplayFor(x => m.Total)</td>
}
else
{
<td>@Html.DisplayFor(x => m.Total)</td>
}
</tr>
}
</tbody>
</table>
@helper DisplayScore(int score)
{
	if (score < 60)
	{
	<td class="poor">@score</td>
	}	
	else if (score >= 95)
	{
	<td class="excellent">@score</td>
	}
	else
	{
	<td>@score</td>
	}
}

可重複使用的Partial View 部分檢視

Partial View 部分檢視，它是可重複使用的檢視區塊，相
較於一般View，Partial View 著眼的是可重複使用區塊，和製作一個大型
完整的View 出發點是不同的。

//同一層目錄
@Html.Partial("PartialView 名稱")
//不同層目錄
@Html.Partial("~/Views/目錄名稱/PartialView 名稱")

以下是Partial View 的特性說明：

1. 呼叫Partial View 的View 就是Parent View 父檢視。
2. 父檢視呼叫Partial View 的指令是@Html.Partial(“部分檢視.cshtml”)。PartialViewName 如果是與主頁面（例如 Index.cshtml）是同一個目錄，則可以直接填入 PartialViewName，而如果是使用其他目錄（例如 ~/Views/Shared/）的 Partial View 檔案，則可以使用檔案路徑。
3. Partial View 延伸檔名與View 相同，都是.csthml。
4. Partial View 可放在個別的View 資料夾，同一個資料夾的Parent View
   會優先參考使用。也可放在Views\Shared 資料夾，讓所有資料夾的
   Parent View 共用。
5. 因此Parent View 尋找Partial View 的順序，是先在本身所在的資料夾搜尋，若找不到的話，才會到Shared 資料夾中尋找。
6. 如果是通用佈局設計應該放在_Layout.cshtml 佈局檔中，非佈局類但可重複使用內容，就可以做成Partial View。

以ViewData 傳遞資料給Partial View

@Html.Partial("PartialView 名稱", ViewData)

1. Partial View 初始時，它會得到Parent View 的ViewDataDictionary
   複本。
2. 但Partial View 更動ViewData 資料，它不會更新回Parent View。
3. Partial View 回傳時，它的ViewData 便會消失。

以model 物件傳遞資料給Partial View

@Html.Partial("PartialName", model 物件)

參考資料：

Razor ASP.NET Core 的語法參考：https://docs.microsoft.com/zh-tw/aspnet/core/mvc/views/razor?view=aspnetcore-3.1