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

　　(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 中的分部視圖