ASP.NET Core MVC中檢視的知識和ASP.NET MVC有很多相似之處，學習難度較低。以下內容主要體現了程式設計中模組化的思想，模組化才應是我們關注的重點。

Layout

佈局用於提供各個頁面所需的公共部分，如：選單、頁頭、頁尾等。在ASP.NET Core中預設的佈局檔案是位於/Views/Shared資料夾下的_Layout.cshtml檔案：

我們通常在_Layout.cshtml中引入公共資源，如：

<link href="~/css/reset.css" rel="stylesheet" />
<link href="~/css/index.css" rel="stylesheet" />
​
<script src="~/js/common/net/ajaxHandler.js"></script>
<environment names="Development">
    <script src="~/js/lib/vue/vue.js"></script>
</environment>
<environment names="Production">
    <script src="~/js/lib/vue/vue.min.js"></script>
</environment>

指定佈局檔案

可以在Razor檢視(即，cshtml檔案)中使用Layout屬性來指定使用哪個佈局檔案：

@{
    Layout="_Layout";
}

ASP.NET Core MVC搜尋佈局檔案的方式與區域性檢視一樣，下文中會詳細說明。預設情況下，在佈局檔案中必須呼叫RenderBody方法。還可以使用RenderSection方法來引入section。

View Import & View Start

View Import

可以在_ViewImport.cshtm檔案中新增名稱空間或者Tag Helper以供其它檢視中使用，如：

@using Microsoft.AspNetCore.Identity
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

在_ViewImport.cshtm檔案可以使用以下指令：

• @addTagHelper

• @removeTagHelper

• @tagHelperPrefix

• @using

• @model

• @inherits

• @inject

_ViewImport.cshtm檔案不支援Razor檔案的其它特性，如：function、section等。對於多個_ViewImports.cshtml

• @addTagHelper, @removeTagHelper: 按照先後順序執行

• @tagHelperPrefix: 後執行的結果覆蓋先執行的結果

• @model: 後執行的結果覆蓋先執行的結果

• @inherits: 後執行的結果覆蓋先執行的結果

• @using: 引入所指定的所有名稱空間，但忽略重複引用

• @inject: 後注入覆蓋先注入的同名屬性

View Start

_ViewStart.cshtml檔案中的程式碼會在所有完整檢視(full view,not layout,not partial view)檔案被渲染之前執行。

預設情況下，ViewImports.cshtml和ViewStart.cshtml檔案直接位於Views資料夾下：

• 相比其它位置的其它位置ViewImports.cshtml和ViewStart.cshtml，直接位於Views資料夾中的ViewImports.cshtml和ViewStart.cshtml檔案會優先執行

• 後執行的ViewImports.cshtml檔案中的內容有可能會覆蓋先執行ViewImports.cshtml檔案中的內容

• ViewImports.cshtml和ViewStart.cshtml檔案的作用域是當前目錄及子目錄

Tag Helper

Tag Helper可以讓伺服器端程式碼參與到在Razor檔案中建立和渲染HTML元素的工作中。

自定義Tag Helper：

public class XfhTagHelper : TagHelper
{
    public string Content { set; get; }
​
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "a";
        output.Attributes.Add("href", "https://www.google.com");
        output.Content.SetContent(Content);
    }
}

使用Tag Helper：

@addTagHelper *,Web
​
<xfh content="haha">customer tag helper</xfh>

Tag Helper與HTML Helper有些相似，二者不同之處可參考：Tag Helpers compared to HTML Helpers

Tag Helper具有以下優點：

• 類HTML語法

  這一點是我喜歡Tag Helper的原因，使用Tag Helper可以使cshtml檔案中後臺程式碼與前端的搭配更和諧，利於提升程式碼可讀性

• 語法智慧感知

Tag Helper 作用域

• @addTagHelper

  @addTagHelper的第一個引數表示要載入哪些Tag Helper，使用"*"表示載入所有的Tag Helper；第二個引數表示從哪個程式集中載入Tag Helper。示例如下：

  @* 需指明TagHelper的完全限定名 *@
  @addTagHelper Web.TagHelpers.XfhTagHelper,Web

• @removeTagHelper

  @removeTagHelper也有兩個引數，含義同@addTagHelper

• @tagHelperPrefix

  給Tag Helper加上字首標識，示例如下：

  @addTagHelper *,Web
  @tagHelperPrefix th:
  ​
  @* 不會被當作Tag Helper處理 *@
  <xfh content="haha">customer tag helper</xfh>
  <th:xfh content="tagHelperPrefix"></th:xfh>

Partial View

Partial view，區域性檢視是一個Razor檔案，它通常巢狀在另一個Razor檔案中。區域性檢視主要用於拆分大的Razor檔案及程式碼複用。但請注意：

• 區域性檢視不應用來維護公共佈局中的內容，考慮使用_Layout.cshtml來維護公共佈局

  Partial views shouldn't be used to maintain common layout elements.

• 儘量不要在區域性檢視中使用複雜的渲染邏輯，或者需要執行一些程式碼片段才能獲取到檢視元素。這種情況考慮使用view component來替代區域性檢視。

  Don't use a partial view where complex rendering logic or code execution is required to render the markup.If you need to execute code, use a view component instead of a partial view.

宣告區域性檢視

區域性檢視名通常以下劃線_開頭，下劃線主要用於易於辨識區域性檢視檔案。注意一點，在渲染區域性檢視時，不會執行_ViewStart.cshtml檔案中的程式碼。其餘與普通檢視一樣。

⚠️區域性檢視中定義的section只對當前區域性檢視可見

使用區域性檢視

引用區域性檢視檔案而不帶副檔名cshtml時，在MVC框架中，會從以下路徑中載入區域性檢視檔案，優先順序從上而下依次降低：

1. /Areas/<Area-Name>/Views/<Controller-Name>

2. /Areas/<Area-Name>/Views/Shared

3. /Views/Shared

4. /Pages/Shared

當引用區域性檔案帶上副檔名時，區域性檢視檔案必須和引用方位於相同目錄下。

可使用以下方式引入區域性檢視：

• Partial Tag Helper

  <partial name="partial.cshtml" model="Model"/>
  @* 區域性檢視檔案字尾可以省略，如： *@
  <partial name="partial" />
  @* 也可以使用區域性檢視檔案全名，如： *@
  <partial name="~/Views/Shared/_PartialName.cshtml" />

• HTML Helper

  @await Html.PartialAsync("_PartialName")

也可以使用 RenderPartialAsync方法來渲染區域性檢視，該方法直接將渲染結果寫入到response中，而不是返回 IHtmlContent，所以只能在Razor程式碼塊中呼叫該方法：

@{
    await Html.RenderPartialAsync("_PartialName");
}

相比於PartialAsync，RenderParatialAsync有著更好的效能。

View Component

View component，檢視元件和區域性檢視類似，但它更強大。一個檢視元件包含兩部分：ViewComponent類和一個檢視。

檢視元件不使用模型繫結，檢視元件中所用的資料有呼叫者提供。檢視元件有以下特點：

• 渲染資料塊而非整個響應

• 關注點分離、易於測試

• 可以有引數和業務邏輯

  MVC本身就提倡關注點分離，所以，檢視元件中應儘可能只包含與渲染檢視相關的邏輯

• 通常在層中呼叫

自定義檢視元件

建立檢視元件類：

• 檢視元件繼承自ViewComponent或使用ViewComponentAttribute特性

• 自定義類約定以ViewComponent結尾（非強制）

public class FirstViewComponent : ViewComponent
{
    // 方法名InvokeAsync是基於約定的，同步方法名為Invoke
    public async Task<IViewComponentResult> InvokeAsync(string descript)
    {
        return View<string>(descript);
    }
}

⚠️ 檢視元件類中可以使用依賴注入。需注意：檢視元件不會參與到Controller的生命週期中，所以filter對它無效。

建立檢視檔案：

檢視元件預設檢視名為：Default，簡單定義檢視內容如下：

<label>
    @Model
</label>

在執行時按照以下順序搜尋檢視檔案：

• /Views/{Controller Name}/Components/{View Component Name}/{View Name}

• /Views/Shared/Components/{View Component Name}/{View Name}

• /Pages/Shared/Components/{View Component Name}/{View Name}