asp.net core系列 42 Web 應用分部視圖

一.分部視圖對於MVC 視圖和 Razor Pages 頁面，都有分部視圖功能。通常將 MVC 視圖和 Razor Pages 頁面統稱為“標記文件”，下麵會常提到該名詞。使用分部視圖的優勢包括：(1) 將大型標記文件分解為更小的組件。(2) 減少跨標記文件中，常見標記內容的重覆。建議：(1)不 ...

一.分部視圖

　　對於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的方法重載。三個文件結構如下：

　　(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>