ASP.NET Core 中文文檔第四章 MVC（3.7 ）局部視圖（partial）

-Advertisement-

ASP.NET Core MVC 支持局部視圖，當你需要在多個不同視圖間重用同一個頁面部件時會顯得特別有用。 ...

原文：Partial Views
作者：Steve Smith
翻譯：張海龍(jiechen)、劉怡(AlexLEWIS)
校對：許登洋(Seay)、何鎮汐、魏美娟(初見)

ASP.NET Core MVC 支持局部視圖，當你需要在多個不同視圖間重用同一個頁面部件時會顯得特別有用。

什麼是局部視圖？

局部視圖是在其它視圖中被渲染的視圖。局部視圖執行後生成的 HTML 結果會被渲染到調用方視圖或父視圖中。跟視圖文件一樣，局部視圖文件也使用 .cshtml 作為文件擴展名。

註解
如果你有 ASP.NET Web Forms 的開發背景，那麼局部視圖就比較類似於你以前用過的用戶控制項

何時使用局部視圖？

局部視圖是將大視圖分解為小組件的有效方式。它可以減少視圖內容的重覆並允許視圖元素復用。通用的佈局元素應該寫在 _Layout.cshtml 中。非佈局（non-layout）的重用內容則可封裝到局部視圖之中。

如果你有一個由多個邏輯塊構成的複雜頁面，那麼將每個邏輯塊都作為局部視圖是很有用的。頁面的每一個部分都可視為獨立於其他部分，而頁面本身也會變得簡單很多，因為它只包含頁面的整體結構並調用渲染各局部視圖。

小技巧
在你的視圖中遵從不要使自己重覆原則。

定義局部視圖

創建局部視圖與創建其它視圖類似：你在 Views 文件夾中添加一個 .cshtml 文件。局部視圖與普通視圖之間沒有語義級的區別，它們只是渲染上有所不同。你可以直接從控制器的 ViewResult 返回一個視圖，而這個視圖也可當做局部視圖來用。兩類視圖的主要區別在於渲染上的不同：局部視圖不會運行 _ViewStart.cshtml （普通視圖則會運行。瞭解更多 _ViewStart.cshtml 的信息請訪問佈局視圖）。

引用局部視圖

有多種方法在視圖中渲染局部視圖。最簡單的辦法是使用 Html.Partial，它通過 @ 首碼來調用並返回 IHtmlContent ：

@Html.Partial("AuthorPartial")

PartialAsync 方法對包含非同步代碼（儘管通常在視圖中不推薦這麼做）的局部視圖是可用的。

@await Html.PartialAsync("AuthorPartial")

可以使用 RenderPartial 渲染局部視圖。這個方法不返回結果；它將渲染結果直接輸出到響應中。正因為它不返回結果，所以必須在 Razor 代碼塊中調用（當然如果有必要，你也可以調用 RenderPartialAsync 方法）：

@{
    Html.RenderPartial("AuthorPartial");
}

因為會直接輸出結果， RenderPartial 和 RenderPartialAsync 方法可能在一些場景下表現更佳。但是，在大多數情況下推薦你使用 Partial 和 PartialAsync 這兩個方法。

註解
如果你的視圖需要執行代碼，推薦你使用視圖組件來替代局部視圖。

發現局部視圖

當引用局部視圖的時候，你可以通過多種方式找到它的位置：

// 以視圖名使用當前文件夾下的視圖
// 如果沒有找到，則搜索 Shared 文件夾
@Html.Partial("ViewName")

// 這個名稱的視圖必須在相同文件夾下
@Html.Partial("ViewName.cshtml")

// 依據應用根路徑定位視圖
// 以 "/" 或 "~/" 開頭的路徑代表應用根路徑
@Html.Partial("~/Views/Folder/ViewName.cshtml")
@Html.Partial("/Views/Folder/ViewName.cshtml")

// 使用相對路徑定位視圖
@Html.Partial("../Account/LoginPartial.cshtml")

若需要，你可以在不同的視圖文件夾下存放同名的不同局部視圖。當根據視圖名稱（不包括文件擴展名）來引用視圖時，視圖將使用其所在的文件夾下的局部視圖。當然你也可以指定並使用預設位於 Shared 文件夾下的局部視圖，這個視圖可被任意視圖（前提是在它們的文件夾下不存在這個局部視圖）使用。換句話說，你可以在 Shared 文件夾下放置預設的局部視圖，該預設局部視圖會被當前執行視圖所在文件夾下的同名局部視圖所覆蓋。

局部視圖可以被連續地鏈式使用。這個意思是說一個局部視圖可以調用另一個局部視圖（只要你不要創建迴圈）。在每個視圖或局部視圖中，相對路徑總是相對於所在視圖，而非根路徑或父視圖。

註解
如果你在局部視圖中定義 Razor section ，將對其父級不可見；將被限定在局部視圖。

從局部視圖訪問數據

當局部視圖被實例化，它獲得父視圖的 ViewData 字典的副本。在局部視圖中對該字典副本進行的修改不會影響到父視圖中的字典。當局部視圖返回時，將丟棄局部視圖中的 ViewData 副本。
你可以傳遞 ViewDataDictionary 的實例到局部視圖：

@Html.Partial("PartialName", customViewData)

你也可以傳遞模型到局部視圖。該模型可以是頁面的視圖模型（view model），也可以是視圖模型的一部分，亦或者是其他自定義對象。只需要在調用 Partial/PartialAsync 或 RenderPartial/RenderPartialAsync 時簡單地把模型作為第二個參數傳入。

@Html.Partial("PartialName", viewModel)

你可以傳遞一個 ViewDataDictionary 的實例和視圖模型到局部視圖：

@Html.Partial("PartialName", viewModel, customViewData)

示例

下例中，視圖指定了 Article 類型的視圖模型。 Article 有一個 AuthorName 屬性，它被傳遞到一個叫做 AuthorPartial 的局部視圖中；同時還有一個 List<ArticleSection> 類型的屬性，它被傳遞到一個專用於渲染此類型的局部視圖：

@using PartialViewsSample.ViewModels
@model Article

<h2>@Model.Title</h2>
@Html.Partial("AuthorPartial", Model.AuthorName)
@Model.PublicationDate

@foreach (var section in @Model.Sections)
{
    @Html.Partial("ArticleSection", section)
}

AuthorPartial （此例中在 /Views/Shared 文件夾）：

@model string
<div>
    <h3>@Model</h3>
    This partial view came from /Views/Shared/AuthorPartial.cshtml.<br/>
</div>

ArticleSection 部分：

@using PartialViewsSample.ViewModels
@model ArticleSection

<h3>@Model.Title</h3>
<div>
    @Model.Content
</div>

在運行時，這些局部視圖將被渲染到父視圖，父視圖自身在共用的 _Layout.cshtml 中被渲染，輸出結果如下：

您的分享是我們最大的動力!