概括的讲,View中的内容可以分为静态和动态两部分。静态内容一般是html元素,而动态内容指的是在应用程序运行的时候动态创建的内容。给View添加动态内容的方式可归纳为下面几种:

  • Inline code,小的代码片段,如 if 和 foreach 语句。
  • Html helper方法,用来生成单个或多个HTML元素,如view model、ViewBag等。
  • Section,在指定的位置插入创建好的一部分内容。
  • Partial view,存在于一个单独的视图文件中,作为子内容可在多个视图中共享。
  • Child action,相当于一个包含了业务逻辑的UI组件。当使用child action时,它调用 controller 中的 action 来返回一个view,并将结果插入到输出流中。

这个分类不是绝对的。前两种很简单,在前面的文章中也使用过。本文主要介绍后三种方式的应用。

本文目录

Section

Razor视图引擎支持将View中的一部分内容分离出来,以便在需要的地方重复利用,减少了代码的冗余。下面来演示如何使用Section。

创建一个MVC应用程序,选择基本模板。添加一个HomeController,编辑生成的Index方法如下:

  1. public ActionResult Index() {
  2. string[] names = { "Apple", "Orange", "Pear" };
  3. return View(names);
  4. }

右击Index方法,添加视图,编辑该视图如下:

  1. @model string[]
  2.  
  3. @{
  4. ViewBag.Title = "Index";
  5. }
  6.  
  7. @section Header {
  8. <div class="view">
  9. @foreach (string str in new [] {"Home", "List", "Edit"}) {
  10. @Html.ActionLink(str, str, null, new { style = "margin: 5px" })
  11. }
  12. </div>
  13. }
  14.  
  15. <div class="view">
  16. This is a list of fruit names:
  17. @foreach (string name in Model) {
  18. <span><b>@name</b></span>
  19. }
  20. </div>
  21. @section Footer {
  22. <div class="view">
  23. This is the footer
  24. </div>
  25. }

我们通过@section标签加section的名称来定义一个Section,这里创建了两个section:Header 和 Footer,习惯上一般把section放在View文件的开头或结尾以方便阅读。下面我们在 /Views/Shared/_Layout.cshtml 文件中来使用它们。

编辑 /Views/Shared/_Layout.cshtml 文件如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width" />
  6. <style type="text/css">
  7. div.layout { background-color: lightgray;}
  8. div.view { border: thin solid black; margin: 10px 0;}
  9. </style>
  10. <title>@ViewBag.Title</title>
  11. </head>
  12. <body>
  13. @RenderSection("Header")
  14.  
  15. <div class="layout">
  16. This is part of the layout
  17. </div>
  18.  
  19. @RenderBody()
  20.  
  21. <div class="layout">
  22. This is part of the layout
  23. </div>
  24.  
  25. @RenderSection("Footer")
  26. <div class="layout">
  27. This is part of the layout
  28. </div>
  29. </body>
  30. </html>

我们通过 @RenderSection 方法来调用section的内容,参数指定了section的名称。运行程序后可以看到如下结果:

注意,section只能在当前View或它的Layout中被调用。@RenderSection方法没有找到参数指定的section会抛异常,如果不确定section是否存在,则需要指定第二个参数的值为false,如下:

  1. ...
  2. @RenderSection("scripts", false)
  3. ...

我们还可以通过 IsSectionDefined 方法来判断一个section是否被定义或在当前View中是否能调用得到,如:

  1. ...
  2. @if (IsSectionDefined("Footer")) {
  3. @RenderSection("Footer")
  4. } else {
  5. <h4>This is the default footer</h4>
  6. }
  7. ...

Partial View

Partial view(分部视图)是将部分 Razor 和 Html 标签放在一个独立的视图文件中,以便在不同的地方重复利用。接下来介绍如何使用 partial view。

我们先来创建一个partial view 。在 /Views/Shared 目录下新建一个名为 MyPartial 的视图文件,勾选“创建为分部视图”,如下:

添加好的 partial view 文件是一个空文件,我们在这个文件中添加如下代码:

  1. <div>
  2. This is the message from the partial view.
  3. @Html.ActionLink("This is a link to the Index action", "Index")
  4. </div>

这个 MyPartial.cshtml 视图用将创建一个回到首页的连接。当然这里的 @Html.ActionLink 方法也是一种(Html helper)动态加载View内容的方式。

然后在 HomeController 中添加一个List action方法,如下:

  1. public ActionResult List()
  2. {
  3. return View();
  4. }

继续为此添加一个 List.cshtml 视图,并通过@Html.Partial方法来调用我们要呈现的分部视图,如下:

  1. @{
  2. ViewBag.Title = "List";
  3. Layout = null;
  4. }
  5. <h3>This is the /Views/Home/List.cshtml View</h3>
  6. @Html.Partial("MyPartial")

视图引擎将按照规定的顺序先后在 /Views/Home 和 /Views/Shared 文件夹下查找 MyPartial 视图。

运行程序导航到 /Home/List,我们可以看到如下效果:

Partial view 和普通和 View 的使用没有什么区别,也可以使用强类型,如我们在 MyPartial.cshtml 中通过 @model 指定 model 的类型:

  1. @model IEnumerable<string>
  2.  
  3. <div>
  4. This is the message from the partial view.
  5. @Html.ActionLink("This is a link to the Index action", "Index")
  6.  
  7. <ul>
  8. @foreach (string str in Model)
  9. {
  10. <li>@str</li>
  11. }
  12. </ul>
  13. </div>

并修改调用 MyPartial.cshtml 视图的主视图 List.cshtml 如下:

  1. @{
  2. ViewBag.Title = "List";
  3. Layout = null;
  4. }
  5. <h3>This is the /Views/Home/List.cshtml View</h3>
  6. @Html.Partial("MyPartial", new[] { "Apple", "Orange", "Pear" })

和上面不同的是,这里我们给 @Html.Partial 指定了第二个参数,将一个数组传递给了 MyPartial.cshtml 的 model 对象。运行效果如下:

Child Action

Child action 和 Patial view 类似,也是在应用程序的不同地方可以重复利用相同的子内容。不同的是,它是通过调用 controller 中的 action 方法来呈现子内容的,并且一般包含了业务的处理。任何 action 都可以作为子 action 。接下来介绍如何使用它。

在 HomeController 中添加一个 action,如下:

  1. [ChildActionOnly]
  2. public ActionResult Time()
  3. {
  4. return PartialView(DateTime.Now);
  5. }

这个 action 通过调用 PartialView 方法来返回一个 partial view。ChildActionOnly 特性保证了该 action 只能作为子action被调用(不是必须的)。

接着我们继续为这个action添加一个相应的 Time.cshtml 视图,代码如下:

  1. @model DateTime
  2.  
  3. <p>The time is: @Model.ToShortTimeString()</p>

在 List.cshtml 视图中添加如下代码来调用 Time action 方法 :

  1. ...
  2. @Html.Action("Time")

运行结果如下:

我们通过 @Html.Action 方法来调用了 Time action 方法来呈现子内容。在这个方法中我们只传了一个action名称参数,MVC将根据当前View所在Controller去查找这个action。如果是调用其它 controller 中的 action 方法,则需要在第二个参数中指定 controller 的名称,如下:

  1. ...
  2. @Html.Action("Time", "MyController")

该方法也可以给 action 方法的参数传值,如对于下面带有参数的 action:

  1. ...
  2. [ChildActionOnly]
  3. public ActionResult Time(DateTime time) {
  4. return PartialView(time);
  5. }

我们可以这样使用 @Html.Action 方法:

  1. ...
  2. @Html.Action("Time", new { time = DateTime.Now })

参考:《Pro ASP.NET MVC 4 4th Edition》

[ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action的更多相关文章

  1. [转][ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action

    本文转自:http://www.cnblogs.com/willick/p/3410855.html 概括的讲,View中的内容可以分为静态和动态两部分.静态内容一般是html元素,而动态内容指的是在 ...

  2. [ASP.NET MVC 小牛之路]17 - 捆绑(Bundle)

    本文介绍 MVC 4 提供的一个新特性:捆绑(Bundle),一个在  View 和 Layout 中用于组织优化浏览器请求的 CSS 和 JavaScript 文件的技术. 本文目录 了解VS默认加 ...

  3. [ASP.Net] 转 > ASP.NET MVC 小牛之路

    URL: http://www.cnblogs.com/willick/ 看到了不错的学习笔记,MVC.Net学习之路展开   [ASP.NET MVC 小牛之路]18 - Web API [ASP. ...

  4. [ASP.NET MVC 小牛之路]18 - Web API

    Web API 是ASP.NET平台新加的一个特性,它可以简单快速地创建Web服务为HTTP客户端提供API.Web API 使用的基础库是和一般的MVC框架一样的,但Web API并不是MVC框架的 ...

  5. [ASP.NET MVC 小牛之路]04 - 依赖注入(DI)和Ninject

    本人博客已转移至:http://www.exblr.com/liam  为什么需要依赖注入 在[ASP.NET MVC 小牛之路]系列的理解MVC模式文章中,我们提到MVC的一个重要特征是关注点分离( ...

  6. [ASP.NET MVC 小牛之路]05 - 使用 Ninject

    在[ASP.NET MVC 小牛之路]系列上一篇文章(依赖注入(DI)和Ninject)的末尾提到了在ASP.NET MVC中使用Ninject要做的两件事情,续这篇文章之后,本文将用一个实际的示例来 ...

  7. [ASP.NET MVC 小牛之路]06 - 使用 Entity Framework

    在家闲着也是闲着,继续写我的[ASP.NET MVC 小牛之路]系列吧.在该系列的上一篇博文中,在显示书本信息列表的时候,我们是在程序代码中手工造的数据.本文将演示如何在ASP.NET MVC中使用E ...

  8. [ASP.NET MVC 小牛之路]10 - Controller 和 Action (2)

    继上一篇文章之后,本文将介绍 Controller 和 Action 的一些较高级特性,包括 Controller Factory.Action Invoker 和异步 Controller 等内容. ...

  9. [ASP.NET MVC 小牛之路]13 - Helper Method

    我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 System.Web.Mvc 命名空间下的 HtmlHelper,习惯上我们把 ...

随机推荐

  1. ROS学习(三)—— ROS文件系统

    一.预备工作 使用ros0tutorials程序包,先下载: sudo apt-get install ros-<distro>-ros-tutorials 其中<distro> ...

  2. linux中redis的php扩展安装

    PHP中的扩展一般都是在安装环境的时候就已经装好了的.但是有的一些扩展在后期想要加上去的话也是可以的.php支持后期安装扩展. 想要安装扩展就需要先去下载安装扩展所需要的扩展源码包.autoconf. ...

  3. PTAM 编译安装 on MAC(mavericks)

    最近有需要研究PTAM,所以需要在我的MAC上编译安装,整个过程让人非常崩溃各种问题陷阱.现在整理一下编译过程.我已经成功在MAC上编译.那么接下来我会详细讲解整个过程: 注意: 部分链接可能需要FQ ...

  4. 转:简单窗体振动-WaitForSingleObject,消息,winapi

    http://www.cnblogs.com/Jekhn/archive/2012/08/25/2656656.html 线程,消息函数,SetWindowPos设置窗体位置 if WaitForSi ...

  5. POJ No.2386【B007】

    [B007]Lake Counting[难度B]—————————————————————————————————————————— [Description] Due to recent rains ...

  6. Python爬虫学习(8):浙大软院网络登陆保持

    在浏览器的验证窗口中输入登陆名和密码后,成功后会弹出一个小的新窗口,如果不小心关闭了这个窗口,则就会无法联网.如果说我在一个不带有桌面的Linux系统中,我是不能够通过浏览器接入网络的,虽然提供了不同 ...

  7. Scrum项目7.0

    队友: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松:http://www.cnb ...

  8. C++-Qt【2】-实现一个简单的记事本

    用Qt实现一个简单的记事本: #include "helloqt.h" #include <qfiledialog.h> #include <qfile.h> ...

  9. javascript常识

    substring和substr的区别 substring() 方法用于提取字符串中介于两个指定下标之间的字符. stringObject.substring(start,stop)例子: <s ...

  10. Django 1.7 throws django.core.exceptions.AppRegistryNotReady: Models aren't loaded yet

    在程序中要添加django.setup() 整个程序如下所示 import os import django def populate(): python_cat = add_cat('Python' ...