本篇我们谈谈分部视图(Partial View)。

上篇文章提到过Partial和Action这两个helper, 本篇文章主要就结合这两个helper来讲解分部视图(Partial View)的应用。

文章提纲

  • 理论基础
  • 详细步骤
  • 总结

理论基础 – 分部视图

Partial View指可以应用于View中以作为其中一部分的View的片段(类似于之前的user control), 可以像类一样,编写一次, 然后在其他View中被反复使用。

一般放在"Views/Shared"文件夹中以共享。

创建Partial View:一般直接右键"Views/Shared"文件夹添加分部视图。

使用Partial View有两类helper :

Html.Partial / Html.RenderPartial

Html.Action / Html.RenderAction

详细步骤

大概五年前我开发过一个iPortal(类似于以前的iGoogle,现在iGoogle已经关闭), 其他类似的参考网站:http://dropthings.omaralzabir.com/

里面有一个个可以自定义的widget,下面我们就开发一个简单的widget来说明Partial View的用法。

创建分部视图

如下图,创建 _PartialPageWidget.cshtml

我们做一个简陋的widget.

参考下面的图,定义widget的HTML结构。

借用了bootstrap中panel的样式,结构如下。

通过Html.Partial / Html.RenderPartial 使用

直接应用Html.Partial或Html.RenderPartial辅助方法比较简单。

打开之前建好的Views/MVCDemo/Index.cshtml文件,添加如下内容:

显示结果:

通过Html.Action / Html.RenderAction 使用

通过Html.Action/Html.RenderAction使用稍微复杂一点,分成两步。

  1. 在要显示的View所对应的Controller中心增加一个Action.

    还用上面这个页面,我们在MVCDemoController.cs中增加一个Action

    做个简单的说明:

    1. [ChildActionOnly] 表示这个Action只应作为子操作进行调用。也就是说直接通过 controller/action这样的网址是不能访问的,会提示只能由子请求访问的错误。
    2. 必须返回一个PartialView
  2. 在View中添加相关代码

    显示结果和上一种方法一样

两种使用方式小结

当View中引用了一个或多个分部视图时,此View与各分部视图默认得到一样的数据,也就是说View及其中所有的Partial View默认情况下共享View中的ViewData和ViewBag.

需要使View和其中引入的Partial View有不同的数据,需要通过Html.Action/Html.RenderAction辅助方法, 并在对于被调用的Action中设置对应的数据。

另外还有几点需要注意:

  1. XXX和RenderXXX的区别在于,一个是直接返回字符串,另外一个是直接写入到相应输出流,因此不能直接放在代码表达式中,必须放在代码块中。

    前面的示例中两种写法是等价的。RenderXXX有轻微的性能优势,在大量的RenderXXX运行时,才能反映出性能上的优势。

  2. Partial/RenderPartial通常在单独的文件夹中应用视图标记来帮助View渲染视图模型的一部分。

    Action/RenderAction执行单独Controller中的Action来显示结果,提供了更多的灵活性,例如利用单独的Controller传递不同值。文章最后我们会举个例子说明。

  3. Partial/RenderPartial和Action/RenderAction的参数分别是 partialView和 Action的名字。当然还有其他的重载函数,我们只说最常用的。应用时可以按照我们前面举的例子。

Html.Partial和Html.Action差异举例

最后我们举个例子说明两种用法的差别。

  1. 新建一个Partial View

  2. Controller中新建两个Action,SharedDateDemo和PartialViewDate.

    根据SharedDateDemo生成主View, PartialViewDate供Html.Action调用

  3. 主View: SharedDateDemo.cshtml分别显示

    主View的时间;

    用Html.Partial调用Partial View的时间;

    用Html.Action调用Partial View的时间。

    显示结果:

    上面结果可以清晰的看到:

    1. View及其中所有的Partial View默认情况下共享View中的ViewData和ViewBag
    2. 可以通过Html.Action, 配合被调用的Action改变传递不同的数据

总结

本次我们主要讲解了Partial View这一实用功能的使用。

Html.Partial使用方便,在不需要改变数据内容时非常方便。

Html.Action 使用更加灵活,可以根据业务要求按需定制Partial View显示内容。

请充分理解本篇文章所讲的几个例子。

好了,今天就到这里。

欢迎大家多多评论,让下一篇文章更好 :)

MVC5+EF6 入门完整教程6 :分部视图(Partial View)相关推荐

  1. MVC5+EF6 入门完整教程十

    原文:MVC5+EF6 入门完整教程十 本篇是第一阶段的完结篇. 学完这篇后,你应该可以利用MVC进行完整项目的开发了. 本篇主要讲述多表关联数据的更新,以及如何使用原生SQL. 文章提纲 多表关联数 ...

  2. MVC5+EF6 入门完整教程 总目录

    本系列文章会从一个主干开始,逐渐深入,初步规划30篇.初级10篇,中级10篇,综合项目实战10篇 初级10篇 MVC5+EF6 入门完整教程10:多对多关联表更新&使用原生SQL@201505 ...

  3. MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用

    MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用 原文:MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用 摘要: 第一阶段1~10篇已经覆盖了MVC开发必要的基本知识. ...

  4. MVC5+EF6 入门完整教程七

    原文:MVC5+EF6 入门完整教程七 本篇我们针对表格显示添加一些新功能. 前面我们已经讲解过表格显示数据了,现在我们添加三个常用功能: 对显示结果进行排序.过滤.分页. 文章提纲 理论基础/前置准 ...

  5. MVC5+EF6 入门完整教程四

    MVC5+EF6 入门完整教程四 原文:MVC5+EF6 入门完整教程四 上篇文章主要讲了如何配置EF, 我们回顾下主要过程: 创建Data Model à 创建Database Context à创 ...

  6. MVC5+EF6 入门完整教程六

    本篇我们谈谈分部视图(Partial View). 上篇文章提到过Partial和Action这两个helper, 本篇文章主要就结合这两个helper来讲解分部视图(Partial View)的应用 ...

  7. MVC5 + EF6 入门完整教程

    原文:https://www.cnblogs.com/miro/p/4030622.html 第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多" ...

  8. MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航

    MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航 原文:MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航 上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇 ...

  9. MVC5+EF6之分部视图(Partial View)

    Partial View指可以应用于View中以作为其中一部分的View的片段(类似于之前的user control), 可以像类一样,编写一次, 然后在其他View中被反复使用. 创建分部视图: ( ...

最新文章

  1. linux内核中等待队列
  2. P2278 [HNOI2003]操作系统
  3. 【地理建模】现代地理学中的数学方法:主成分分析法案例详解
  4. mysql 多表查询 join on_mysql多表查询
  5. [html] webp与jpg、png比较,它有什么优劣势?如何选择?
  6. vs2008下如何部署arcengine开发的程序
  7. 怎样保证linux内核安全性,技术|如何做好 Linux 内核安全处理
  8. 背景建模与前景检测之二(Background Generation And Foreground Detection Phase 2)
  9. 云主机搭建linux web,linux云主机web服务的搭建和配置
  10. HanLP-命名实体识别总结
  11. TCP/UDP端口列表(转)
  12. Go语言使用百度翻译api
  13. 礼物帮手-论文(不全)
  14. 8B / 10B Encode/Decode详解
  15. 《近匠》Worktile王涛:典型MEAN架构下的团队协作工具
  16. Zbrush人体手部模型雕刻 | 手部笔刷太好用了
  17. java多态注意事项(陷进)
  18. 理论:MySQL数据库
  19. PhotoSwipe介绍(1)
  20. 超宽屏幕比例_变身超宽显示器!21:9分辨率修改攻略

热门文章

  1. AD原理图端口添加页码编号
  2. 阿里云服务器搭建自己的个人网站
  3. python基于PHP+MySQL婚介交友网站的设计与开发
  4. spring 扫描器
  5. html手机系统制作,一种专用手机系统的制作方法
  6. 2020中国上市公司品牌价值榜发布;上海迪士尼乐园重新开放 | 美通企业日报
  7. 使用excel生成商品条形码
  8. 十类经典office实用技巧
  9. FT232R转RS485电路图
  10. vue 导包、启动命令