asp.net core系列 42 Web 應用 分部視圖
一.分部視圖
對于MVC 視圖和 Razor Pages 頁面,都有分部視圖功能。通常将 MVC 視圖和 Razor Pages 頁面統稱為“标記檔案”,下面會常提到該名詞。使用分部視圖的優勢包括:(1) 将大型标記檔案分解為更小的元件。(2) 減少跨标記檔案中,常見标記内容的重複。
建議:(1)不應使用分部視圖來維護常見布局元素,常見布局元素應在 _Layout.cshtml 檔案中指定,比如頁頭、頁尾。(2)當需要呈現複雜邏輯或代碼執行的應該使用視圖元件。
1.1 聲明分部視圖
分部視圖是在 Views 檔案夾 (MVC) 或 Pages 檔案夾 (Razor Pages) 中維護的 .cshtml 标記檔案。在 ASP.NET Core MVC 中,控制器的 ViewResult 能夠傳回視圖或分部視圖。 在 ASP.NET Core 2.2 中 Razor Pages 的PageModel 可以傳回 PartialViewResult分部視圖。
分部視圖不會運作 _ViewStart.cshtml頁,這涉及到布局以後再講。分部視圖的檔案名通常以下劃線
_
開頭,沒有.cshtml.cs檔案。
1.2 引用分部視圖
在标記檔案中,有多種方法可引用分部視圖。 建議應用程式使用以下異步呈現方法之一:(1) 分部标記幫助程式。(2) 異步 HTML 幫助程式。 不建議使用同步HTML 幫助程式, 因為可能會出現死鎖的情況, 同步方法以後版本中會删除,這裡不再介紹。
(1) 分部标記幫助程式
分部标記幫助程式會異步呈現内容,并使用類似 HTML 的文法:
<partial name="_PartialName" />
當存在檔案擴充名時,标記幫助程式會引用分部視圖,該視圖必須與調用分部視圖的标記檔案位于同一檔案夾中:
<partial name="_PartialName.cshtml" />
以下示例從應用程式根目錄引用分部視圖。 以 (
~/
) 或 (
/
) 開頭的路徑,指代應用程式根目錄:
Razor 頁面CSHTML
<partial name="~/Pages/Folder/_PartialName.cshtml" />
<partial name="/Pages/Folder/_PartialName.cshtml" />
MVC CSHTML
<partial name="~/Views/Folder/_PartialName.cshtml" />
<partial name="/Views/Folder/_PartialName.cshtml" />
使用相對路徑的分部視圖
<partial name="../Account/_PartialName.cshtml" />
(2) 異步 HTML 幫助程式
使用 HTML 幫助程式時,最佳做法是使用 PartialAsync,同步是使用Partial(不建議使用同步)。PartialAsync 傳回包含在 Task<TResult> 中的 IHtmlContent 類型。通過@await來引用該方法。
Razor 頁面CSHTML
@await Html.PartialAsync("~/Pages/Folder/_PartialName.cshtml")
@await Html.PartialAsync("/Pages/Folder/_PartialName.cshtml")
mvc CSHTML
@await Html.PartialAsync("~/Views/Folder/_PartialName.cshtml")
@await Html.PartialAsync("/Views/Folder/_PartialName.cshtml")
也可以使用 RenderPartialAsync 呈現分部視圖。 此方法不傳回 IHtmlContent。它将呈現的輸出,直接流式傳輸到響應, 是以在某些情況下它可提供更好的性能。 因為該方法不傳回結果,是以必須在 Razor 代碼塊内調用它:
@{
await Html.RenderPartialAsync("_AuthorPartial");
}
1.3 分部視圖發現
如果按名稱(無檔案擴充名)引用分部視圖,則按所述順序搜尋以下位置:
(1) Razor 頁面
1.目前正在執行頁面的檔案夾
2.該頁面檔案夾上方的目錄圖
3./Shared
4./Pages/Shared
5./Views/Shared
(2) MVC
1./Areas/<Area-Name>/Views/<Controller-Name>
2./Areas/<Area-Name>/Views/Shared
3./Views/Shared
4./Pages/Shared
1.4 通過分部視圖通路資料
執行個體化分部視圖時,它會獲得父視圖(主視圖)的
ViewData
字典的副本。 在分部視圖内,對資料所做的更新不會儲存到父視圖中。 對分部視圖中的
ViewData
更改,會在分部視圖傳回時丢失。
以下示例示範如何将 ViewDataDictionary(
ViewData
字典)的執行個體傳遞給分部視圖:
@await Html.PartialAsync("_PartialName", customViewData)
還可将模型(實體對象)傳入分部視圖。 模型可以是自定義對象。
@await Html.PartialAsync("_PartialName", model)
二. 示範
下面示範一個Razor的分部視圖(MVC的參考官網示例)。示例中Pages/ArticlesRP/ReadRP.cshtml是主視圖,Pages/Shared/_AuthorPartialRP.cshtml是第一個分部視圖,傳入“作者”。Pages/ArticlesRP/_ArticleSectionRP.cshtml 是第二個分部視圖,傳入ViewData字典和section模型二個參數,這二個參數是PartialAsync的方法重載。 三個檔案結構如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISM9AnYldnJwAzN9c3Pn5GcuQ0MlMWbidXNp1ENFpnT3tmaNRTWU1EdBRUT4lFVNJTVU90dRRVT6FEVPhXQq1EdBpmTxUEVOhHO510drRVT3lkeMdXWU5EeVRVT2NmMiNnSywEd5ITW110MaZHetlVdO1GT0UERNl3YXJGc5kHT20ESjBjUIF2Lc12bj5SYphXa5VWen5WY35iclN3Ztl2Lc9CX6MHc0RHaiojIsJye.png)
(1) 建立實體類
public class Article
{
public string Title { get; set; }
public string AuthorName { get; set; }
public string PublicationDate { get; set; }
public List<ArticleSection> Sections { get; set; }
}
public class ArticleSection
{
public string Title { get; set; }
public string Content { get; set; }
}
(2)主視圖
public class ReadRPModel : PageModel
{
public Article Article { get; set; }
public void OnGet()
{
Article = new Article()
{
Title = "來自 <共享分部視圖檔案路徑> 的分部視圖",
AuthorName = "Abraham Lincoln",
PublicationDate= "1863 年 11 月 19 日中午 12:00:00",
Sections = new List<ArticleSection>() {
new ArticleSection (){ Title="第一節索引", Content="八十七年前..." },
new ArticleSection (){ Title="第二節索引", Content="如今,我們正在進行一場偉大的内戰,考驗着......" },
new ArticleSection (){ Title="第三節索引", Content="然而,從更廣泛的意義上說,我們無法奉獻..." },
}
};
}
}
@page
@model ReadRPModel
<h2>@Model.Article.Title</h2>
@Model.Article.PublicationDate
@* 将作者名字傳到 Pages\Shared\_AuthorPartialRP.cshtml*@
<p>---------------------------------第一個分部視圖/Views/Shared/_AuthorPartial.cshtml</p>
@await Html.PartialAsync("../Shared/_AuthorPartialRP.cshtml", Model.Article.AuthorName)
<p></p>
@* Loop over the Sections and pass in a section and additional ViewData to
the strongly typed Pages\ArticlesRP\_ArticleSectionRP.cshtml partial view. *@
<p>---------------------------------第二個分部視圖/Views/Shared/_ArticleSection.cshtml</p>
@{
var index = 0;
@foreach (var section in Model.Article.Sections)
{
@await Html.PartialAsync("_ArticleSectionRP", section,
new ViewDataDictionary(ViewData)
{
{ "index", index }
})
index++;
}
}
(3) 分部視圖 _AuthorPartialRP.cshtm
@* 将傳過來的string類型映射*@
@model string
<div>
<h3>@Model</h3>
</div>
(4) 分部視圖 _ArticleSectionRP.cshtml
@using StudyRazorDemo.Models;
@* 将傳過來的對象映射到ArticleSection中*@
@model ArticleSection
<h3>@Model.Title Index: @ViewData["index"]</h3>
<div>
@Model.Content
</div>
<p></p>
啟動程式,運作http://localhost:42921/ArticlesRP/ReadRP,顯示如下:
參考資料
ASP.NET Core 中的分部視圖
posted on 2019-03-14 10:35 花陰偷移 閱讀(...) 評論(...) 編輯 收藏