一、部分视图
PartialView (分部视图),这是在使用asp.net mvc 中首次知道的的名称,但是ASP.NET MVC 里的部分视图的概念对使用过webForm的人来说一点都不陌生,相当于 Web Form 里的 User Control。我们的页面往往会有许多重用的地方,可以进行封装重用。
使用部分视图 的好处:
1. 可以简写代码。
2. 页面代码更加清晰、更好维护。
二、如何使用
分部视图是需要有一个“宿主”。PartialView就是一个招之即来,挥之即去的用户控件,所以想调用partialView就需要被触发,这就需要一个主页面。
在视图里有多种方法可以加载部分视图,主要有如下方法:
1、Partial() Action()
2、RenderPartial()
3、RenderAction()
4、RenderPage()
这些方法有什么差别呢,分析他们的差别,可以让我们在不同的时候选择不同的方法。
首先是第一组:Partial与RenderPartial 方法
1.Razor 语法:@Html.Partial() 与 @{Html.RenderPartial();}
2. Partial 可以直接输出内容,它内部是 将 html 内容转换为 string 字符(MVCHtmlString),然后缓存起来,最后在一次性输出到页面。显然,这个转换的过程,会降低效率,所以通常使用 RenderPartial 代替。
第二组:RenderPartial 与 RenderAction 方法
1. Razor 语法:@{Html.RenderPartial();} 与 @{Html.RenderAction();}
2.RenderPartial 不需要创建 Controller 的 Action ,而 RenderAction 需要在 Controller 创建要加载的 Action。
RenderAction 会先去调用 Contorller的 Action ,最后再 呈现视图,所以这里 页面会在 发起一个链接。
如果这个部分视图只是一些简单 的 html 代码,请使用 RenderPartial。 但如果这个部分视图 除了有 html 代码外,还需要 通过 读取数据库里的数据 来渲染,就必须使用 RenderAction 了,因为 它可以在 Action 里调用 Model里的方法读取数据库,渲染视图后在呈现,而 RenderPartial 没有 Action,所以无法做到。
第三组:RenderAction 与 Action
1. Razor 语法:@{Html.RenderAction();} 与@Html.Action();
2. Action 也是直接输出,和 Partial 一样,也存在一个转换的过程。不如 RenderAction 直接输出到 当前 HttpContext 的效率高。
第四组:RenderPage 与 RenderPartial 方法
1. Razor 语法:@{Html.RenderPartial();} 与@RenderPage()
2. 也可以使用 RenderPage 来呈现部分,但它不能使用 原来视图的 Model 和 ViewData ,只能通过参数来传递。而RenderPartial 可以使用原来视图的 Model 和ViewData。
三、搜索框的示例代码
主页代码:
<div id="mainBody" >
@*加载部分页面*@
@* 1、 加载搜索框*@
<span style="color:#FF0000;">@{Html.RenderPartial("../../Views/ControlsPartial/SearchboxPartial");}</span>
<div id="ContentAreas" >
<div class="easyui-panel" title="写自己的标题" >
@* 2、加载按钮*@
@{Html.RenderAction("PermissionBtnsPartial", "ControlsPartial");}
<input type="hidden" id="urllink" value="/Test/FuzzyQuery"/>
@*3、先调用 对应的业务Controller中的表头数据*@
@{Html.RenderAction("ShowProperties", "ControlsPartial");}
@* 4、加载 数据表格 datagrid *@
@{Html.RenderAction("DataGrid", "ControlsPartial", new { url = "/ControlsPartial/QueryData" });}
</div>
</div>
</div>
部分视图:一个项目中,有一个这样的搜索框就足以了。
<div id="search_box" style="margin:10px 10px 5px 15px; ">
@* 只使用 easyui 样式 *@
<input id="queryCondition" name="queryCondition" type="text" style="width: 300px;" />@* runat="server"*@
<a href="#" id="queryRecord" class="easyui-linkbutton" iconcls="icon-search" plain="true" οnclick="doSearch();">查询</a>
<a href="#" class="easyui-linkbutton" id="searchMore" name="serachMore" iconcls="icon-search" plain="true" οnclick="doSearchMore()">更多</a>
</div>
示例效果:
四、总结
ASP.NET MVC 引入的 部分视图(PartialView)和 布局 (Layout)其实都不是新的概念,相当于是 Web Form 里的UserControl 和 Master Page 。原理是一样的,只是 写法不同,入乡随俗:进来webForm的大门一个写法,进来asp.net mvc 就是另一个写法。