ASP.NET MVC Partial View 和 Child Action

本篇文章我们来讨论ASP.NET MVC框架中的Partial View和Child Action。

Partial View(子视图)

在使用ASP.NET MVC框架进行开发时，经常会将一些相同的HTML代码从这个地方复制到那个地方，造成这段代码在很多地方重复，并且，这段代码还不能放到 Layout中。维护这样子的代码是很困难的，如果这段重复的代码需要修改，那么就需要把所有重复的地方都修改一遍，漏掉一个都容易出问题。

Partial View可以解决两个问题，一个是代码重用的问题，另一个是局部刷新问题。

创建一个Partial View

在VS的解决方案资源管理器中，右击Views文件夹的某个子文件夹，选择 ”添加“=>”视图“，勾选上”创建为部分视图“，然后输入名称点确定即可。下面是一个简单的Partial View的代码(文件名为‘~/Views/Home/MyPartial.cshtml’)

<p>
    this is a partial view 
</p>
<p>
    创建时间：@DateTime.Now
</p>

Partial View 与View的对比

目前据我所知（欢迎批评指正），Partial View文件跟View的唯一区别是，呈现View时，会把 ~/Views/_ViewStart.cshtml 文件的内容添加进来，而呈现Partial View时则不会。默认情况下，~/Views/ _ViewStart.cshtml 文件只包含一行代码Layout = "~/Views/Shared/_Layout.cshtml";，这行代码在编译时会被添加到所有View的最上方，所以，我们不需要在View文件中给Layout属性赋值，它就有了默认值，而Partial View的Layout属性是没有默认值的。尽管Partial View的Layout属性没有默认值（或默认值为null），我们也可以根据需要来给Partial View指定Layout。

除了那点区别以外，View和Partial View是一样的。在PartialView中我们可以编写HTML代码，使用Razor引擎来嵌入C#代码等，可以将Partial View指定为强类型，可以接受从Action中传递过来的数据（这个Action必须是Child Action， 需要return PartialView();，而不是return View();，我接下来会介绍）。

使用Partial View

我们可以通过下面的方式在页面中来嵌入一个Partial View

@Html.Partial("MyPartial")

这个方法会把我们定义在MyPartial文件中的代码插入到当前页面。

Child Action

Child Action就是返回return PartialView();的Action，它的作用就是通过返回一个PartialView方法去呈现一个Partial View。

public ActionResult MyPartial()
{
    ViewBag.Message = "hello,world";
    return PartialView();
}

这段代码会调用MyPartial这个Partial View返回给浏览器。关于Controller和Action的基础知识，可以参见 ASP.NET MVC Controller和Action 。

上面使用@Html.Partial("MyPartial")的方式来调用Partial View时，会直接找到对应的cshtml文件来呈现，而不经过Controller和Action。如果我们添加了Partial View对应的Child Action的话，就可以通过路由系统来返回需要的Partial View，例如，可以通过@Html.Action("MyPartial")的方式来调用，可以通过重载来传递更多的参数，在Child Action中获取参数。我们还可以使用JQuery来实现局部刷新，代码如下

<script>
    $(function () {
        $('#button1').click(function () {
            $('#section1').load('@Url.Action("MyPartial")');
        });
    });
</script>