MVC分部视图的使用:Html.Partial/RenderPartial,Html.Action/RenderAction,RenderPage
ASP.NET MVC 里的部分视图,相当于 Web Form 里的 User Control。我们的页面往往会有许多重用的地方,可以进行封装重用。
使用部分视图有以下优点: 1. 可以简写代码。 2. 页面代码更加清晰、更好维护。
在视图里有多种方法可以 加载部分视图,包括: Partial() 、RenderPartial() 、 Action() 、RenderAction() 、 RenderPage() 方法
一、Partial与RenderPartial
1.Razor 语法: @Html.Partial() 与 @{Html.RenderPartial();}
2.区别:Partial 可以直接输出内容,它内部是 将 html 内容转换为 string 字符(MVCHtmlString)(进行Html编码),然后缓存起来,最后在一次性输出到页面。显然,这个转换的过程,会降低效率,所以通常使用 RenderPartial 代替。 这两者都只是抓取分部视图页面类容,不能执行分部视图方法,所以用Partial或RenderPartial方法来显示分部视图不用建立对应的Action,因为不走Action.
3.实例:
普通调用分部视图
主页 Index.cshtml:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h3>我是首页</h3>
<section>
<h2>分部视图</h2>
@Html.Partial("~/Views/Templates/Partial1.cshtml")
//@{Html.RenderPartial("~/Views/Templates/Partial1.cshtml");}
</section> </div></body></html>
分部视图Partial1.cshtml:
<table border="1px solid" cellpadding="0" cellspacing="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
</tr>
<tr>
<td>longxi1</td>
<td>男</td>
<td>22</td>
<td>13521187063</td>
</tr>
<tr>
<td>longxi1</td>
<td>男</td>
<td>22</td>
<td>13521187063</td>
</tr>
</table>
强类型分部视图:
主页 Index.cshtml:
@using WebApplication1.Models
@{
Layout = null;
}
@{
List<Student> students = new List<Student>() {
new Student("zhulongxi",22,"男","13521187063"),
new Student("zhulongxi",22,"男","13521187063"),
new Student("zhulongxi",22,"男","13521187063"),
new Student("zhulongxi",22,"男","13521187063"),
new Student("zhulongxi",22,"男","13521187063")
};
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h3>我是首页</h3>
<section>
<h4>分部视图</h4>
@Html.Partial("~/Views/Templates/Partial1.cshtml", students)//如果Partial1.cshtml与Index.cshtml在相同目录,则可以直接写成
@Html.Partial("Partial1", students)
</section> </div></body></html>
分部视图Partial1.cshtml:
@using WebApplication1.Models;
@{
var studentsList = Model as List<Student>;
}
<table border="1px solid" cellpadding="0" cellspacing="0">
@foreach (Student student in studentsList)
{
<tr>
<th>@student.Name</th>
<th>@student.Gender</th>
<th>@student.Age</th>
<th>@student.Phone</th>
</tr>
}
</table>
二、Action与RenderAction
1.Razor 语法:@Html.Action()与@{Html.RenderAction();}
2.区别:Action 也是直接输出,和 Partial 一样,也存在一个转换的过程。不如 RenderAction 直接输出到当前 HttpContext 的效率高。
除此之外,Action与Partial相比,Action访问了控制器中的Action,执行了Action内部的业务。
3.实例:
Index.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h3>我是首页</h3>
<section>
<h4>分部视图</h4>
@Html.Action("MyPartial", "Home",new { title="学生列表"})
</section>
</div>
</body>
</html>
HomController:
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult MyPartial(string title)
{
List<Student> students = new List<Student>() {
new Student("zhulongxi2",22,"男","13521187063"),
new Student("zhulongxi2",22,"男","13521187063"),
new Student("zhulongxi2",22,"男","13521187063"),
new Student("zhulongxi2",22,"男","13521187063"),
new Student("zhulongxi2",22,"男","13521187063")
};
ViewBag.Data = title;
return PartialView("~/Views/Templates/Partial2.cshtml",students);
}
}
Partial2.cshtml:
@using WebApplication1.Models
@{
var studentsList = Model as List<Student>;
var data = ViewBag.Data;
}
@{Response.Write(data); }
<table border="1px solid" cellpadding="0" cellspacing="0">
@foreach (Student student in studentsList)
{
<tr>
<th>@student.Name</th>
<th>@student.Gender</th>
<th>@student.Age</th>
<th>@student.Phone</th>
</tr>
}
</table>
三、RenderPage
1.Razor语法:@RenderPage()
2.区别:也可以使用 RenderPage 来呈现部分,但它不能使用 原来视图的 Model 和 ViewData ,只能通过参数来传递。而 RenderPartial、RenderAction 可以使用原来视图的 Model 和 ViewData。@RenderPage也并没有执行Action。
3.实例:
不传参数情况:
Index.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h3>我是首页</h3>
<section>
<h4>分部视图</h4>
@RenderPage("~/Views/Templates/Partial1.cshtml")
</section>
</div>
</body>
</html>
传参数情况:
Index.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h3>我是首页</h3>
<section>
<h4>分部视图</h4>
@RenderPage("~/Views/Templates/Partial1.cshtml",new { param1="longxi",param2="男"})
</section>
</div>
</body>
</html>
Partial1.cshtml:
@{
var param = string.Format("{0}-{1}", PageData["param1"], PageData["param2"]);
}
@Html.Raw(param)