局部视图(partial)

原文: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");
}
 

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

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

 

发现局部视图

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

复制代码
// 以视图名使用当前文件夹下的视图
// 如果没有找到,则搜索 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/PartialAsync 或 RenderPartial/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 中被渲染,输出结果如下:

由于水平有限,错漏之处在所难免,欢迎大家批评指正,不胜感激,我们将及时修正。
dotNet Core Studying Group:436035237

局部视图(partial)的更多相关文章

  1. Ruby Rails学习中:网站导航,Bootstrap和自定义的CSS,局部视图

    添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...

  2. NET Core-学习笔记(四)

    经过前面分享的三篇netcore心得再加上本篇分享的知识,netcore大部分常用知识应该差不多了,接下来将不会按照章节整合一起分享,因为涉及到的东西整合到一起篇幅太大了,所以后面分享将会按照某一个知 ...

  3. 第十章 设计用户界面 之 构建UI布局

    1. 概述 本章内容包括:实现可在不同区域重用的片段.使用Razor模板设计和实现页面.设计可视结构的布局.基于模板页开发. 2. 主要内容 2.1 实现可在不同区域重用的片段 最简单的重用方式就是在 ...

  4. ASP.NET Core 中文文档 第四章 MVC(3.7 )局部视图(partial)

    原文:Partial Views 作者:Steve Smith 翻译:张海龙(jiechen).刘怡(AlexLEWIS) 校对:许登洋(Seay).何镇汐.魏美娟(初见) ASP.NET Core ...

  5. ASP.NET Core MVC 之局部视图(Partial Views)

    1.什么是局部视图 局部视图是在其他视图中呈现的视图.通过执行局部视图生成的HTML输出呈现在调用视图中.与视图一样,局部视图使用 .cshtml 文件扩展名.当希望在不同视图之间共享网页的可重用部分 ...

  6. MVC中局部视图的使用

    加载部分视图 $("#result").load("/home/message",function(){ //加载完之后隐藏进度条 }); public Act ...

  7. ruby on rails全局布局,局部视图,局部布局

    参考链接:http://guides.ruby-china.org/layouts_and_rendering.html#%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E6 ...

  8. 015.NET5_MVC_Razor局部视图

    局部视图 1. 可以增加代码的重用性 如何定义? 1.添加一cshtml文件 2. 在页面中调用局部视图:@html.Partial("局部视图的名称") 问题:局部视图中不能访问 ...

  9. ASP.NET MVC RenderPartial和Partial的区别

    背景:ASP.NET MVC 4.0 @{ Html.RenderPartial(...); } public static void RenderPartial(this HtmlHelper ht ...

随机推荐

  1. Linux中查看系统资源占用情况的命令【转载】

      用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O 负载 ...

  2. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  3. 深入了解Angularjs指令中的ngModel

    关于AngularJs的指令的知识学习,请参考... 这次我们接上次没讲完的知识继续. 前端人员在设计表单逻辑时, 在大部分情况下,我们需要为表单定义很多指令, 比如比较两个input内的值是否相同, ...

  4. LINUX kernel笔记系列 :IO块参数 图

      Linux下,I/O处理的层次可分为4层: 系统调用层,应用程序使用系统调用指定读写哪个文件,文件偏移是多少 文件系统层,写文件时将用户态中的buffer拷贝到内核态下,并由cache缓存该部分数 ...

  5. Java基础知识强化之集合框架笔记61:Map集合之统计字符串中每个字符出现的次数的案例

    1. 首先我们看看统计字符串中每个字符出现的次数的案例图解: 2. 代码实现: (1)需求 :"aababcabcdabcde",获取字符串中每一个字母出现的次数要求结果:a(5) ...

  6. linux+apache+mod_Jk+tomcat实现tomcat集群

    最近一段时间一直在研究实现apache + jk_mod + tomcat实现负载均衡,起初负载均衡算是配置蛮顺利的,但是到了配置tomcat集群时所有配置都没有问题,但是tomcat日志中一直提示没 ...

  7. 使用jquery.validate.js实现boostrap3的校验和验证

    使用jquery.validate.js实现boostrap3的校验和验证 boostrap3验证框架 jquery.validate.js校验表单 >>>>>>& ...

  8. android获取Mac地址和IP地址

    获取Mac地址实际项目中测试了如下几种方法:(1)设备开通Wifi连接,获取到网卡的MAC地址(但是不开通wifi,这种方法获取不到Mac地址,这种方法也是网络上使用的最多的方法) //根据Wifi信 ...

  9. 获得Radio选中的后面文本框的值

    例如: 选中的radio的值在button中显示 代码如下: <!DOCTYPE html> <html lang="en" xmlns="http:/ ...

  10. js 连续赋值

    无意中网上发现的这个问题,预想的结果和真实的结果大相径庭. var a={n:1} var b=a; a.x=a={n:2} console.log(a.x); console.log(b.x); u ...