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

  1. 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 中的分部视图

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容