必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-08-14 05:13:16来源:IT技术作者:seo实验室小编阅读:63次「手机版」
 

renderpartial

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>
    <p> 
        <h3>我是首页</h3>
        <section>
            <h2>分部视图</h2>
            @Html.Partial("~/Views/Templates/Partial1.cshtml")
	    //@{Html.RenderPartial("~/Views/Templates/Partial1.cshtml");}
 </section> </p></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>
    <p> 
        <h3>我是首页</h3>
        <section>
            <h4>分部视图</h4>
            @Html.Partial("~/Views/Templates/Partial1.cshtml", students)//如果Partial1.cshtml与Index.cshtml在相同目录,则可以直接写成
 		@Html.Partial("~/Views/Templates/Partial1.cshtml", students)
 </section> </p></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>
    <p> 
        <h3>我是首页</h3>
        <section>
            <h4>分部视图</h4>
            @Html.Action("MyPartial", "Home",new { title="学生列表"})
        </section>
    </p>
</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>
    <p> 
        <h3>我是首页</h3>
        <section>
            <h4>分部视图</h4>
          
           @RenderPage("~/Views/Templates/Partial1.cshtml")
        </section>
    </p>
</body>
</html>
传参数情况:

Index.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <p> 
        <h3>我是首页</h3>
        <section>
            <h4>分部视图</h4>
           @RenderPage("~/Views/Templates/Partial1.cshtml",new { param1="longxi",param2="男"})
        </section>
    </p>
</body>
</html>
Partial1.cshtml:

@{ 
    var param = string.format("{0}-{1}", PageData["param1"], PageData["param2"]);
}
@Html.Raw(param)

相关阅读

MVC中@RenderBody、@RenderSection、@RenderPage、@Ht

1、@RenderBody() 作用和母版页中的服务器控件类似,当创建基于此布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容

分享到:

栏目导航

推荐阅读

热门阅读