ASP.NET Core MVC 之區域性檢視（Partial Views）

卡西莫多_Ruby發表於2019-08-03
ASP.NETMVCView

 

1.什麼是區域性檢視

　　區域性檢視是在其他檢視中呈現的檢視。通過執行區域性檢視生成的HTML輸出呈現在呼叫檢視中。與檢視一樣，區域性檢視使用 .cshtml 副檔名。當希望在不同檢視之間共享網頁的可重用部分時，就可以使用區域性檢視。

2.什麼時候使用區域性檢視

　　區域性檢視是將大檢視分成小元件的有效方法。通用的佈局元素應在 _Layout.cshtml 中指定，非佈局可重用內容可以封裝成區域性檢視。

　　如果一個由幾個邏輯部分組成的複雜頁面，那麼將每個邏輯部分作為區域性檢視是很有用。佈局檢視與普通檢視之間沒有語義差別，它們只是以不同的方式呈現。你可以直接從控制器的 ViewResult 返回檢視，而這個檢視也可以當區域性檢視來用。檢視和區域性檢視的主要區別是呈現方式不同，區域性檢視不執行 _ViewStart.cshtml，而檢視執行。

3.引用區域性檢視

　　在檢視頁面中有幾種方法呈現區域性檢視。最簡單的是使用 Html.Partial ，它通過 @ 字首來呼叫並返回 IHtmlString ： @Html.Partial("AuthorPartial")。

　　PartialAsync 方法對包含非同步程式碼的區域性檢視是可用的： @await Html.PartialAsync("AuthorPartial") 。

　　還可以使用 RenderPartial 方法來呈現區域性檢視。這個方法不返回結果：它將渲染結果直接輸出到響應中。正因為它不返回響應，所以必須在 Razor 程式碼塊中呼叫。通用也有一個非同步方法 RenderPartialAsync:

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

4.發現區域性檢視

　　當引用區域性檢視時，可以通過多種方式找到它的位置：

//以檢視名使用當前資料夾下的檢視，如果沒有找到，則搜尋Shared 資料夾
@Html.Partial("ViewName")

//這個名稱的檢視必須在相同資料夾下
@Html.Partial("ViewName.cshtml")

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

//使用相對路徑
@Html.Partial("../Account/ViewName.cshtml")

　　區域性檢視可以連結。也就是說，一個區域性檢視可以呼叫另一個區域性檢視（只要不建立迴圈）。

5.區域性檢視訪問資料

　　當區域性檢視被例項化時，它獲取父檢視的 ViewData 字典的副本。對區域性檢視中的資料所做的更新不會影響到父檢視。區域性檢視返回時，區域性檢視中更改的 ViewData 將丟失。

　　你可以將 ViewDataDictionary 的例項傳遞到區域性檢視： @Html.Partial("PartialName",customViewData) 。

　　也可以將模型傳遞到區域性檢視：@Html.Partial("PartialName",viewModel) 。

　　也可以將ViewDataDictionary 和 模型都傳遞到檢視：@Html.Partial("PartialName",viewModel，customViewData) 。

6.簡單實戰

　　先建立用到的模型：

namespace MVCTest.Models
{
    public class Article
    {

　　　　　　public Article()
　　　　　　{
　　　　　　　　Sections = new List<ArticleSection>();
　　　　　　}

public string AuthorName { get; set; }
        public List<ArticleSection> Sections { get; set; }
    }

    public class ArticleSection
    {
        public string Title { get; set; }
        public string Content { get; set; }
    }
}

　　然後在控制器中例項化模型：

    public class ArticleController : Controller
    {
        // GET: Article
        public ActionResult Index()
        {
            var article = new Article();
            article.AuthorName = "test";
            article.Sections.Add(new ArticleSection() { Title="title",Content="content"});
            return View(article);
        }

    }

　　父檢視：

@model MVCTest.Models.Article

@{
    ViewData["Title"] = "Index";
}

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

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

　　AuthorPartial.cshtml：

@model string

<h3>@Model</h3>

　　ArticleSection.cshtml：

@model MVCTest.Models.ArticleSection

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

 

相關文章