ASP.NET Core MVC 之局部視圖（Partial Views）

 

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>