MVC分部视图的使用:Html.Partial/RenderPartial,Html.Action/RenderAction,RenderPage

时间  2021-01-18

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：

[plain]  view plain  copy
  1. @{  
  2.     Layout = null;  
  3. }  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html>  
  8. <head>  
  9.     <meta name="viewport" content="width=device-width" />  
  10.     <title>Index</title>  
  11. </head>  
  12. <body>  
  13.     <div>   
  14.         <h3>我是首页</h3>  
  15.         <section>  
  16.             <h2>分部视图</h2>  
  17.             @Html.Partial("~/Views/Templates/Partial1.cshtml")  
  18.         //@{Html.RenderPartial("~/Views/Templates/Partial1.cshtml");}  
  19.  </section> </div></body></html>  
  20. 分部视图Partial1.cshtml:  
  21. <table border="1px solid" cellpadding="0" cellspacing="0">  
  22.     <tr>  
  23.         <th>姓名</th>  
  24.         <th>性别</th>  
  25.         <th>年龄</th>  
  26.         <th>电话</th>  
  27.     </tr>  
  28.     <tr>  
  29.         <td>longxi1</td>  
  30.         <td>男</td>  
  31.         <td>22</td>  
  32.         <td>13521187063</td>  
  33.     </tr>  
  34.     <tr>  
  35.         <td>longxi1</td>  
  36.         <td>男</td>  
  37.         <td>22</td>  
  38.         <td>13521187063</td>  
  39.     </tr>  
  40. </table>  
  41. 强类型分部视图：  
  42. 主页 Index.cshtml：  
  43. @using WebApplication1.Models  
  44. @{  
  45.     Layout = null;  
  46. }  
  47. @{   
  48.     List<Student> students = new List<Student>() {  
  49.         new Student("zhulongxi",22,"男","13521187063"),  
  50.         new Student("zhulongxi",22,"男","13521187063"),  
  51.         new Student("zhulongxi",22,"男","13521187063"),  
  52.         new Student("zhulongxi",22,"男","13521187063"),  
  53.         new Student("zhulongxi",22,"男","13521187063")  
  54.     };  
  55. }  
  56. <!DOCTYPE html>  
  57.   
  58. <html>  
  59. <head>  
  60.     <meta name="viewport" content="width=device-width" />  
  61.     <title>Index</title>  
  62. </head>  
  63. <body>  
  64.     <div>   
  65.         <h3>我是首页</h3>  
  66.         <section>  
  67.             <h4>分部视图</h4>  
  68.             @Html.Partial("~/Views/Templates/Partial1.cshtml", students)//如果Partial1.cshtml与Index.cshtml在相同目录，则可以直接写成  
  69.         @Html.Partial("~/Views/Templates/Partial1.cshtml", students)  
  70.  </section> </div></body></html>  

分部视图Partial1.cshtml:

[plain]  view plain  copy
  1. @using WebApplication1.Models;  
  2. @{   
  3.     var studentsList = Model as List<Student>;  
  4. }  
  5. <table border="1px solid" cellpadding="0" cellspacing="0">  
  6.     @foreach (Student student in studentsList)  
  7.     {  
  8.         <tr>  
  9.             <th>@student.Name</th>  
  10.             <th>@student.Gender</th>  
  11.             <th>@student.Age</th>  
  12.             <th>@student.Phone</th>  
  13.         </tr>  
  14.     }  
  15. </table>  
二、Action与RenderAction

1.Razor 语法：@Html.Action()与@{Html.RenderAction();}
2.区别：Action 也是直接输出，和 Partial 一样，也存在一个转换的过程。不如 RenderAction 直接输出到当前 HttpContext 的效率高。
除此之外，Action与Partial相比，Action访问了控制器中的Action，执行了Action内部的业务。
3.实例：

Index.cshtml:

[plain]  view plain  copy
  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head>  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>Index</title>  
  7. </head>  
  8. <body>  
  9.     <div>   
  10.         <h3>我是首页</h3>  
  11.         <section>  
  12.             <h4>分部视图</h4>  
  13.             @Html.Action("MyPartial", "Home",new { title="学生列表"})  
  14.         </section>  
  15.     </div>  
  16. </body>  
  17. </html>  

HomController:

[plain]  view plain  copy
  1. public class HomeController : Controller  
  2.     {  
  3.         // GET: Home  
  4.         public ActionResult Index()  
  5.         {  
  6.             return View();  
  7.         }  
  8.         public ActionResult MyPartial(string title)  
  9.         {  
  10.             List<Student> students = new List<Student>() {  
  11.             new Student("zhulongxi2",22,"男","13521187063"),  
  12.             new Student("zhulongxi2",22,"男","13521187063"),  
  13.             new Student("zhulongxi2",22,"男","13521187063"),  
  14.             new Student("zhulongxi2",22,"男","13521187063"),  
  15.             new Student("zhulongxi2",22,"男","13521187063")  
  16.              };  
  17.             ViewBag.Data = title;  
  18.             return PartialView("~/Views/Templates/Partial2.cshtml",students);  
  19.         }  
  20.     }  
Partial2.cshtml:
[plain]  view plain  copy
  1. @using WebApplication1.Models  
  2. @{   
  3.     var studentsList = Model as List<Student>;  
  4.     var data = ViewBag.Data;  
  5. }  
  6. @{Response.Write(data); }  
  7. <table border="1px solid" cellpadding="0" cellspacing="0">  
  8.     @foreach (Student student in studentsList)  
  9.     {  
  10.         <tr>  
  11.             <th>@student.Name</th>  
  12.             <th>@student.Gender</th>  
  13.             <th>@student.Age</th>  
  14.             <th>@student.Phone</th>  
  15.         </tr>  
  16.     }  
  17. </table>  

三、RenderPage

1.Razor语法：@RenderPage()
2.区别：也可以使用 RenderPage 来呈现部分，但它不能使用 原来视图的 Model 和 ViewData ,只能通过参数来传递。而 RenderPartial、RenderAction 可以使用原来视图的 Model 和 ViewData。@RenderPage也并没有执行Action。
3.实例：
不传参数情况：
Index.cshtml：

[plain]  view plain  copy
  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head>  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>Index</title>  
  7. </head>  
  8. <body>  
  9.     <div>   
  10.         <h3>我是首页</h3>  
  11.         <section>  
  12.             <h4>分部视图</h4>  
  13.             
  14.            @RenderPage("~/Views/Templates/Partial1.cshtml")  
  15.         </section>  
  16.     </div>  
  17. </body>  
  18. </html>  
传参数情况：
Index.cshtml:
[plain]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta name="viewport" content="width=device-width" />  
  5.     <title>Index</title>  
  6. </head>  
  7. <body>  
  8.     <div>   
  9.         <h3>我是首页</h3>  
  10.         <section>  
  11.             <h4>分部视图</h4>  
  12.            @RenderPage("~/Views/Templates/Partial1.cshtml",new { param1="longxi",param2="男"})  
  13.         </section>  
  14.     </div>  
  15. </body>  
  16. </html>  
Partial1.cshtml:
[plain]  view plain  copy
  1. @{   
  2.     var param = string.Format("{0}-{1}", PageData["param1"], PageData["param2"]);  
  3. }  
  4. @Html.Raw(param)  
联系我们 沪ICP备13005482号-10