本篇文章我们来讨论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>