前言
相信對於在 MVC 架構下， view 可以使用 Razor (使用 @ 寫法)，已經是再熟悉不過了，所以就來稍微複習一下，畢竟對於本系列來說，若使用到 ASP .NET Core MVC 架構，那就會需要知道怎麼使用！

分享主軸

• Razor
• View Components (本篇不多做說明，底下有附上一篇教學文章)
• Tag Helpers
• Partial Views

Razor

Razor 是一種標記語法，將基於 .NET 的程式碼嵌入到頁面中，允許將 HTML 與 C# 程式碼混合，以動態生成，發送到客戶端瀏覽器的內容(名為 .cshtml)，如下範例

一般值印出的使用

@{
    var message = "Hello, World!";
}
<p>Message : @message</p>

<p>Date : @DateTime.Now</p>

得出結果
`
Message : Hello, World!

Date : 會印出現在時間
`

條件 與 迴圈

@if (DateTime.Now.Hour < 12)
{
    <p>Good morning!</p>
}
else
{
    <p>Good afternoon!</p>
}

@for (int i = 0; i < 5; i++)
{
    <p>Number: @i</p>
}

Partial Views

是一種特殊的頁面，嵌入在其他頁面中，並生成 HTML 輸出，這些輸出會被渲染到父視圖中。Partial Views 通常以 _ 開頭區分

使用時機

• 重複的頁面邏輯：當需要在多個頁面中重複用相同的頁面邏輯時，可以使用 Partial Views
• 分解過於複雜的頁面：將大型、複雜的頁面分解為更小的部分，這樣可以更容易地管理和維護

有多種方法可以在視圖中渲染 Partial Views

• Html.Partial 和 Html.PartialAsync
  這些方法會返回 Partial 頁面的 HTML 內容，並將其嵌入到主頁面中

@Html.Partial("_PartialViewName", Model)
@await Html.PartialAsync("_PartialViewName", Model)

• Html.RenderPartial 和 Html.RenderPartialAsync
  這些方法直接將 Partial 頁面的內容渲染到輸出流中，而不返回結果

@{ Html.RenderPartial("_PartialViewName", Model); }
@{ await Html.RenderPartialAsync("_PartialViewName", Model); }

差異

簡單來說你可否賦值

@{
    var partialContent = Html.Partial("_PartialViewName", Model);
}
<div>
    @partialContent
</div>

或是

@model YourNamespace.ParentModel

@{
    var partialContent = Html.Partial("_PartialViewName", Model.PartialModel);
}

<h1>Main View</h1>
<div>
    @partialContent
</div>

而 Html.RenderPartial 和 Html.RenderPartialAsync 無法做到這件事情

上述也可以使用 Tag Helper 寫法來做到一樣效果

    <!-- 使用相對路徑包含部分視圖 -->
    <partial name="_PartialName" />
    
    <!-- 使用絕對路徑包含部分視圖 -->
    <partial name="/Views/Folder/_PartialName.cshtml" />

• 簡潔的語法： 更接近 HTML 語法，使得代碼更加簡潔和易讀
• 異步渲染：Tag Helper(標籤協助程式)會以異步方式渲染 Partial Views，這有助於提高應用程式的性能

Tag Helper

在 HTML 標籤中嵌入後端邏輯，從而使得 Razor 頁面更加簡潔和易讀

介紹幾個常用的

1. Anchor Tag Helper： 用於生成超連結的 URL(通過在 HTML 標籤中添加特定的屬性來動態生成 href 屬性)，以 asp- 開頭，常用屬性如下

• asp-controller：指定控制器名稱
• asp-action：指定方法名稱
• asp-route：指定路由名稱
• asp-route-{parameter}：指定路由參數
• asp-area：指定區域名稱（如果使用區域）
• asp-page：指定 Razor Page 的路徑（用於 Razor Pages）
• asp-page-handler：指定 Razor Page 的處理程序（用於 Razor Pages）

<a asp-controller="Home" asp-action="Index">Home</a>

結果

<a href="/Home/Index">Home</a>

2. Form Tag Helper： 用於生成表單

<form asp-controller="Account" asp-action="Login">
    <!-- 表單內容 -->
</form>

3. Input Tag Helper： 用於生成輸入框

<input asp-for="UserName" />

結果

<input type="text" id="UserName" name="UserName" />

今日結語
此架構下的頁面，後端語法可以融合在裡面，解決複雜邏輯，但這樣有時候過於複雜就會造成負擔，使用上還是得思考一下，不過撇開這些不說，有了 Razor，是真的方便許多

參考教學文章

Tag Helper

https://www.learnrazorpages.com/razor-pages/tag-helpers

View Components (它也是一個很好用的功能之一，若有興趣，可以參考下面文章)

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/mvc/views/view-components.md

Partial views

https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-8.0&viewFallbackFrom=aspnetcore-8