概括的讲，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方法如下：

public ActionResult Index() {

    string[] names = { "Apple", "Orange", "Pear" };

    return View(names);

}

右击Index方法，添加视图，编辑该视图如下：

@model string[] 

@{

    ViewBag.Title = "Index";

} 

@section Header {

    <div class="view">

        @foreach (string str in new [] {"Home", "List", "Edit"}) {

            @Html.ActionLink(str, str, null, new { style = "margin: 5px" })

        }

    </div>

}

<div class="view">

    This is a list of fruit names:

    @foreach (string name in Model) {

        <span><b>@name</b></span>

    }

</div>

@section Footer {

    <div class="view">

        This is the footer

    </div>

}

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <style type="text/css">

        div.layout { background-color: lightgray;}

        div.view { border: thin solid black; margin: 10px 0;}

    </style>

    <title>@ViewBag.Title</title>

</head>

<body>

    @RenderSection("Header") 

    <div class="layout">

        This is part of the layout

    </div> 

    @RenderBody() 

    <div class="layout">

        This is part of the layout

    </div>

    @RenderSection("Footer")

<div class="layout">

        This is part of the layout

    </div>

</body>

</html>

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

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

...

@RenderSection("scripts", false)

...

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

...

@if (IsSectionDefined("Footer")) {

    @RenderSection("Footer")

} else {

    <h4>This is the default footer</h4>

}

...

Partial View

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

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

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

<div>

    This is the message from the partial view.

    @Html.ActionLink("This is a link to the Index action", "Index")

</div>

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

然后在 HomeController 中添加一个List action方法，如下：

public ActionResult List()

{

    return View();

}

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

@{

    ViewBag.Title = "List";

    Layout = null;

}

<h3>This is the /Views/Home/List.cshtml View</h3>

@Html.Partial("MyPartial")

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

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

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

@model IEnumerable<string>

<div>

    This is the message from the partial view.

    @Html.ActionLink("This is a link to the Index action", "Index")

    <ul>

        @foreach (string str in Model)

        {

            <li>@str</li>

        }

    </ul>

</div>

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

@{

    ViewBag.Title = "List";

    Layout = null;

}

<h3>This is the /Views/Home/List.cshtml View</h3>

@Html.Partial("MyPartial", new[] { "Apple", "Orange", "Pear" })

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

Child Action

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

在 HomeController 中添加一个 action，如下：

[ChildActionOnly]

public ActionResult Time()

{

    return PartialView(DateTime.Now);

}

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

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

@model DateTime

<p>The time is: @Model.ToShortTimeString()</p>

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

...

@Html.Action("Time")

运行结果如下：

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

...

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

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

...

[ChildActionOnly]

public ActionResult Time(DateTime time) {

    return PartialView(time);

}

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

...

@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. CentOS一键ftp

    # Version : 1.0 # Author : 果子 # Date : -- :: # Description : 只需要三步即可完成安装 # chmod a+x install_vsftpd. ...

  2. maven权威指南学习笔记（四）—— maven生命周期（lifecycle）

    定义: 生命周期是包含在一个项目构建中的一系列有序的阶段 举个例子来说就是maven 对一个工程进行: 验证(validate) -- 编译源码(compile) -- 编译测试源码(test-com ...

  3. js数组操作大全

    原文(http://www.cnblogs.com/webhotel/archive/2010/12/21/1912732.html) 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简 ...

  4. js中的 || 与 && 运算符 的使用

    &&和||总是傻傻分不清,在这里详细记录一下吧.也给你们分享一下. 表达式a && 表达式b :  计算表达式(或者函数)a的运算结果, 如果为 True, 执行表达式 ...

  5. 用Redis实现Session功能

    0.什么是Redis Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API ---维基百科 1.与其他用户状态保存方 ...

  6. Python 基础语法学习笔记

    以下运行结果均通过Python3.5版本实测! 1.列表转换为字典 a = ['a', 'b'] b = [1, 2] c = ['c','d'] print (dict([a,b,c])) 输出结果 ...

  7. IDE-Sublime【3】-配置Node.js开发环境

    一.下载Nodejs插件,下载地址为https://github.com/tanepiper/SublimeText-Nodejs,解压到当前文件夹,改名为Nodejs 二.打开Sublime Tex ...

  8. maven构建简单的web项目

    把jdk给换掉 项目修改好了以后写个页面测试一下,结果正常 下面应该添加依赖让web项目一步步丰满起来. 0-添加依赖 1-建一个servlet 2-web.xml中添加servlet声明 3-重新运 ...

  9. 0_MVC+EF+Autofac(dbfirst)轻型项目框架_基本框架

    前言 原来一直使用他人的开源项目框架,异常的定位会很麻烦,甚至不知道这个异常来自我的代码还是这个框架本身.他人的框架有一定的制约性,也有可能是我对那些框架并没深入了解,因为这些开源框架在网上也很难找到 ...

  10. WP8如何添加Newtonsoft.Json包

    WP8开发的时候如何使用Newtonsoft.Json包呢?我在网上包括官网下的DLL文件,添加引用时都给出了这样的提示: 而后在网上找到的解决办法是:使用NuGet程序包来添加. 首先点击工具--& ...