当前位置: 首页 > article >正文

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) 

http://www.kler.cn/a/18497.html

相关文章:

  • 什么是 Real-Time Factor (RTF)
  • 计算机新手练级攻略——如何搜索问题
  • LeetCode【0016】最接近的三数之和
  • Vue 中的定时刷新与自动更新实现
  • 微服务架构面试内容整理-监控与追踪-Zipkin
  • 【C++笔记】C++三大特性之继承
  • 硬盘数据突然消失怎么回事?硬盘数据突然消失怎么找回
  • 【运动规划算法项目实战】八叉树地图(附ROS C++代码)
  • 如何用100天彻底学会Python?
  • JavaScript class和继承的原理
  • 【Queue新技法】用双数组实现一个队列 C++
  • C++类和对象(上)
  • 华为OD机试真题 Java 实现【猜字谜】【2023Q2】
  • Adobe考试
  • 【MySQL】索引
  • 字节跳动发放年终奖,远超预期~
  • 将sublime中的自定义代码片段snippet 转为vscode可用的代码片段 (cursor可用)
  • Java笔记_17(异常、File)
  • uboot 启动内核代码分析
  • C++结构体分别在:栈空间、堆空间、静态存储区中初始化
  • 【计算机专业漫谈】【计算机系统基础学习笔记】W2-2-1 原码和移码表示
  • vue概述
  • Go数据机构----栈与队列
  • CANoe以太网配置 Network-Based Access Mode
  • 离散化(算法)
  • 卫星下行链路预算模型(未完待续)