MVC（四、布局）

最新推荐文章于 2022-02-21 00:23:34 发布

zaichuanguanshui

最新推荐文章于 2022-02-21 00:23:34 发布

阅读量734

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： mvc 布局 RenderBody

本文链接：https://blog.youkuaiyun.com/zaichuanguanshui/article/details/54631401

web 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了MVC布局中的关键概念，包括Layout页、View页和Partial页。讲解了Layout页的基础，如放置位置、引用方式及@RenderBody()、@RenderSection()的使用。还提到了@RenderPage和@Scripts.Render、@Styles.Render在整合资源方面的作用。同时，文章探讨了View视图页和Partial页的创建与调用，包括Jquery、Html.Action和Html.Partial的使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、MVC布局简介

MVC布局常用Layout页（布局页），View页（视图页），Partial页（部分也，用户自定义控件）

2、Layout页基础

1）布局页一般放置在~/Views/Shared/目录下

视图页引用布局页时，使用Layout=~/Views/Shared/_Layout.cshtml
一般在_ViewStart.cshtml给所有view设置layout

2）@RenderBody()

使用@RenderBody()作为占位符，加载引用了这个layout的视图页

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

3）@RenderSection

布局页面还有节（Section）的概念，也就是说，如果某个视图模板中定义了一个节，那么可以把它单独呈现出来

为了防止因缺少节而出现异常，可以给RenderSection()提供第2个参数：

//第二个参数required=false，表示如果视图页没有定义，就不显示，但是不会报错
@RenderSection("head", false)
或
//如果没有定section就显示默认设置
@if (IsSectionDefined("head"))
{
    @RenderSection("head", false)
}
else
{
    <p>SubMenu Section is not defined!</p>
}

Layout：

 @RenderSection("SectionJS", false)

view：

@Render SectionJS{
　　内容
}

一般在视图页的js和css都是通过@section引用的

4）@RenderPage

从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中，然后在布局页面中通过这个方法调用，用法如下：

@RenderPage(“~/Views/Shared/_Header.cshtml”)

带参数

@RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you")

调用页面获取参数：

//获取 RenderPage() 传递过来的参数
@PageData["param"]

5）@Scripts.Render和@Styles.Render()

在视图文件中使用@Scripts.Render()引用BundleConfig中关于js的配置
在视图文件中使用@Styles.Render()引用BundleConfig中关于style的配置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content1/css")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jqueryui")
</body>
</html>

6）Layout例子：

@using common = www.AppCode.Common;  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width" />  
    <title>@common.GetTitle(ViewBag.IndependentTitle,ViewBag.Title)</title>  
    @Styles.Render("~/Content/css")  
    @Scripts.Render("~/bundles/modernizr")  
    <!-- 子页插入到head的入口。相当于母版页里的ContentPlaceHolder -->  
    @RenderSection("header", required: false)  
</head>  
<body>  
    <div>  
        <div id="ly_Top" class="ly_960">  
            <div id="ly_User">  
                <!-- 登录信息。相当于用户控件 -->  
                @{Html.RenderAction("LoginInfo", "Partial");}  
            </div>  
            <div id="ly_Web">  
            </div>  
        </div>  

        <div id="ly_NaviContainer">  
            <div id="ly_Navi">  
                <div class="ly_960">  
                    <div id="ly_Logo" onclick="location.href='/'"></div>  
                    <div>  
                        <!-- 导航条。相当于用户控件 -->  
                        @{Html.RenderAction("Navi"  
                              , "Partial"  
                              , new { parentController = ViewContext.RouteData.Values["controller"].ToString() });}  
                    </div>  
                </div>  
            </div>  
        </div>  

        <div id="ly_Main">  
            <!-- 输出嵌套页 -->  
            @RenderBody()  
        </div>  
   </div>  

    @Scripts.Render("~/bundles/jquery182")  
    <!-- 子页插入到页面底部的入口。相当于母版页里的ContentPlaceHolder -->  
    @RenderSection("scripts", required: false)  
</body>  
</html>

3、View视图页

@{  
    Layout = "~/Views/Shared/_Layout.cshtml";  
}  
@section header{  
    @Styles.Render("~/Content/SingleContent")  
    @* 这是本子布局页的子页插入内容的入口，注意到没？它写在本子布局页插入母版页的入口处*@  
    @RenderSection("header", required: false)  
}  
@section Scripts {  
    @RenderSection("scripts", required: false)  
}  
<div class="content_box container">  
    <div class="content_box_in">  
        @RenderBody()  
    </div>  
</div>

4、Partial页

新建一个控制器：

public class AdminController : Controller
{
    public ActionResult UpdateAdmin()
    {
        return PartialView("UpdateAdmin", new YingPingPuirtureMVC4.Models.LoginModel() { Name = "admin", Password = "admin" });
    }
 }

在Views 的Shared文件夹添加一个视图 UpdateAdmin，部分视图需要在Shared文件夹里创建

调用视图的几种方法：

1） Jquery 调用

$(function () {
    $("#load").load("/Admin/UpdateAdmin");
})

2 ） Html.Action 调用
使用Html.Action 调用部分视图，需要经过Controller

@Html.Action("UpdateAdmin","Admin")

3） Html.Partial调用
使用Html.Partial调用部分视图，不经过Controller，直接调用html，并传递参数

@Html.Partial("UpdateAdmin", new YingPingPuirtureMVC4.Models.LoginModel() {  Name="admin", Password="admin"})