原文:Partial Views

作者:Steve Smith

翻译:张海龙(jiechen)刘怡(AlexLEWIS)

校对:许登洋(Seay)何镇汐魏美娟(初见)

ASP.NET Core MVC 支持局部视图,当你需要在多个不同视图间重用同一个页面部件时会显得特别有用。

什么是局部视图?

局部视图是在其它视图中被渲染的视图。局部视图执行后生成的 HTML 结果会被渲染到调用方视图或父视图中。跟视图文件一样,局部视图文件也使用 .cshtml 作为文件扩展名。

注解

如果你有 ASP.NET Web Forms 的开发背景,那么局部视图就比较类似于你以前用过的 用户控件

何时使用局部视图?

局部视图是将大视图分解为小组件的有效方式。它可以减少视图内容的重复并允许视图元素复用。通用的布局元素应该写在 _Layout.cshtml 中。非布局(non-layout)的重用内容则可封装到局部视图之中。

如果你有一个由多个逻辑块构成的复杂页面,那么将每个逻辑块都作为局部视图是很有用的。页面的每一个部分都可视为独立于其他部分,而页面本身也会变得简单很多,因为它只包含页面的整体结构并调用渲染各局部视图。

小技巧

在你的视图中遵从 不要使自己重复原则

定义局部视图

创建局部视图与创建其它视图类似:你在 Views 文件夹中添加一个 .cshtml 文件。局部视图与普通视图之间没有语义级的区别,它们只是渲染上有所不同。你可以直接从控制器的 ViewResult 返回一个视图,而这个视图也可当做局部视图来用。两类视图的主要区别在于渲染上的不同:局部视图不会运行 _ViewStart.cshtml (普通视图则会运行。了解更多 _ViewStart.cshtml 的信息请访问 布局视图)。

引用局部视图

有多种方法在视图中渲染局部视图。最简单的办法是使用 Html.Partial,它通过 @ 前缀来调用并返回 IHtmlContent

@Html.Partial("AuthorPartial")

PartialAsync 方法对包含异步代码(尽管通常在视图中不推荐这么做)的局部视图是可用的。

@await Html.PartialAsync("AuthorPartial")

可以使用 RenderPartial 渲染局部视图。这个方法不返回结果;它将渲染结果直接输出到响应中。正因为它不返回结果,所以必须在 Razor 代码块中调用(当然如果有必要,你也可以调用 RenderPartialAsync 方法):

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

因为会直接输出结果, RenderPartialRenderPartialAsync 方法可能在一些场景下表现更佳。但是,在大多数情况下推荐你使用 PartialPartialAsync 这两个方法。

注解

如果你的视图需要执行代码,推荐你使用 视图组件 来替代局部视图。

发现局部视图

当引用局部视图的时候,你可以通过多种方式找到它的位置:

// 以视图名使用当前文件夹下的视图
// 如果没有找到,则搜索 Shared 文件夹
@Html.Partial("ViewName") // 这个名称的视图必须在相同文件夹下
@Html.Partial("ViewName.cshtml") // 依据应用根路径定位视图
// 以 "/" 或 "~/" 开头的路径代表应用根路径
@Html.Partial("~/Views/Folder/ViewName.cshtml")
@Html.Partial("/Views/Folder/ViewName.cshtml") // 使用相对路径定位视图
@Html.Partial("../Account/LoginPartial.cshtml")

若需要,你可以在不同的视图文件夹下存放同名的不同局部视图。当根据视图名称(不包括文件扩展名)来引用视图时,视图将使用其所在的文件夹下的局部视图。当然你也可以指定并使用默认位于 Shared 文件夹下的局部视图,这个视图可被任意视图(前提是在它们的文件夹下不存在这个局部视图)使用。换句话说,你可以在 Shared 文件夹下放置默认的局部视图,该默认局部视图会被当前执行视图所在文件夹下的同名局部视图所覆盖。

局部视图可以被连续地链式使用 。这个意思是说一个局部视图可以调用另一个局部视图(只要你不要创建循环)。在每个视图或局部视图中,相对路径总是相对于所在视图,而非根路径或父视图。

注解

如果你在局部视图中定义 Razor section ,将对其父级不可见;将被限定在局部视图。

从局部视图访问数据

当局部视图被实例化,它获得父视图的 ViewData 字典的副本。在局部视图中对该字典副本进行的修改不会影响到父视图中的字典。 当局部视图返回时,将丢弃局部视图中的 ViewData 副本。

你可以传递 ViewDataDictionary 的实例到局部视图:

@Html.Partial("PartialName", customViewData)

你也可以传递模型到局部视图。该模型可以是页面的视图模型(view model),也可以是视图模型的一部分,亦或者是其他自定义对象。只需要在调用 Partial/PartialAsyncRenderPartial/RenderPartialAsync 时简单地把模型作为第二个参数传入。

@Html.Partial("PartialName", viewModel)

你可以传递一个 ViewDataDictionary 的实例和视图模型到局部视图:

@Html.Partial("PartialName", viewModel, customViewData)

示例

下例中,视图指定了 Article 类型的视图模型。 Article 有一个 AuthorName 属性,它被传递到一个叫做 AuthorPartial 的局部视图中;同时还有一个 List<ArticleSection> 类型的属性,它被传递到一个专用于渲染此类型的局部视图:

@using PartialViewsSample.ViewModels
@model Article <h2>@Model.Title</h2>
@Html.Partial("AuthorPartial", Model.AuthorName)
@Model.PublicationDate @foreach (var section in @Model.Sections)
{
@Html.Partial("ArticleSection", section)
}

AuthorPartial (此例中在 /Views/Shared 文件夹):

@model string
<div>
<h3>@Model</h3>
This partial view came from /Views/Shared/AuthorPartial.cshtml.<br/>
</div>

ArticleSection 部分:

@using PartialViewsSample.ViewModels
@model ArticleSection <h3>@Model.Title</h3>
<div>
@Model.Content
</div>

在运行时,这些局部视图将被渲染到父视图,父视图自身在共享的 _Layout.cshtml 中被渲染,输出结果如下:

ASP.NET Core 中文文档 第四章 MVC(3.7 )局部视图(partial)的更多相关文章

  1. ASP.NET Core 中文文档 第四章 MVC(4.2)控制器操作的路由

    原文:Routing to Controller Actions 作者:Ryan Nowak.Rick Anderson 翻译:娄宇(Lyrics) 校对:何镇汐.姚阿勇(Dr.Yao) ASP.NE ...

  2. ASP.NET Core 中文文档 第四章 MVC(3.6.1 )Tag Helpers 介绍

    原文:Introduction to Tag Helpers 作者:Rick Anderson 翻译:刘浩杨 校对:高嵩(Jack) 什么是 Tag Helpers? Tag Helpers 提供了什 ...

  3. ASP.NET Core 中文文档 第四章 MVC(3.8)视图中的依赖注入

    原文:Dependency injection into views 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:孟帅洋(书缘) ASP.NET Core 支持在视图中使用 依赖 ...

  4. ASP.NET Core 中文文档 第四章 MVC(4.6)Areas(区域)

    原文:Areas 作者:Dhananjay Kumar 和 Rick Anderson 翻译:耿晓亮(Blue) 校对:许登洋(Seay) Areas 是 ASP.NET MVC 用来将相关功能组织成 ...

  5. ASP.NET Core 中文文档 第四章 MVC(4.5)测试控制器逻辑

    原文: Testing Controller Logic 作者: Steve Smith 翻译: 姚阿勇(Dr.Yao) 校对: 高嵩(Jack) ASP.NET MVC 应用程序的控制器应当小巧并专 ...

  6. ASP.NET Core 中文文档 第四章 MVC(4.4)依赖注入和控制器

    原文: Dependency Injection and Controllers 作者: Steve Smith 翻译: 刘浩杨 校对: 孟帅洋(书缘) ASP.NET Core MVC 控制器应通过 ...

  7. ASP.NET Core 中文文档 第四章 MVC(4.1)Controllers, Actions 和 Action Results

    原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...

  8. ASP.NET Core 中文文档 第四章 MVC(3.9)视图组件

    作者: Rick Anderson 翻译: 娄宇(Lyrics) 校对: 高嵩 章节: 介绍视图组件 创建视图组件 调用视图组件 演练:创建一个简单的视图组件 附加的资源 查看或下载示例代码 介绍视图 ...

  9. ASP.NET Core 中文文档 第四章 MVC(01)ASP.NET Core MVC 概览

    原文:Overview of ASP.NET Core MVC 作者:Steve Smith 翻译:张海龙(jiechen) 校对:高嵩 ASP.NET Core MVC 是使用模型-视图-控制器(M ...

随机推荐

  1. CENTOS 6.5 平台离线编译安装 PHP5.6.6

    一.下载php源码包 http://cn2.php.net/get/php-5.6.6.tar.gz/from/this/mirror 二.编译 编译之前可能会缺少一些必要的依赖包,加载一个本地yum ...

  2. Android之常见问题集锦Ⅱ

    Android问题集锦Ⅰ:http://www.cnblogs.com/AndroidJotting/p/4608025.html EditText输入内容改变事件监听 _edit.addTextCh ...

  3. Node.js:进程、子进程与cluster多核处理模块

    1.process对象 process对象就是处理与进程相关信息的全局对象,不需要require引用,且是EventEmitter的实例. 获取进程信息 process对象提供了很多的API来获取当前 ...

  4. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  5. 编写高质量代码:改善Java程序的151个建议(第8章:多线程和并发___建议126~128)

    建议126:适时选择不同的线程池来实现 Java的线程池实现从根本上来说只有两个:ThreadPoolExecutor类和ScheduledThreadPoolExecutor类,这两个类还是父子关系 ...

  6. Javascript高性能编程-提高Dom访问速度

    在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度.下面是对如何优化的一些总结: 将需要多次操作的节点存储在一个 ...

  7. FineBI:一个简单易用的自助BI工具

    过去,有关企业数据分析的重担都压在IT部门,传统BI分析更多面向的是具有IT背景的人员.但随着业务分析需求的增加,很多公司都希望为业务用户提供自助分析服务,将分析工作落实到业务人员手中.但同时,分析工 ...

  8. 分享一款自己改进的皮肤“verdant”.

    - -!我总觉得我不应该这个样子了,这是个不好的习惯,面对博客,我每周或者每个月都会有审美疲劳,然后又写一个皮肤模板,不停的循环,至今都写了好多好多了,都记不清了,汗... 下面是我这今天审美疲劳写的 ...

  9. 图形数据库Neo4J简介

    最近我在用图形数据库来完成对一个初创项目的支持.在使用过程中觉得这种图形数据库实际上挺有意思的.因此在这里给大家做一个简单的介绍. NoSQL数据库相信大家都听说过.它们常常可以用来处理传统的关系型数 ...

  10. 详解前端模块化工具-webpack

    webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合 ...