mvc视图母版页执行顺序,以及占位符的使用

1.首先,MVC按照路由机制来启动网站的,如果这个时候的默认路由配置如下:

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

  则网站启动时候会调用Home控制器下的Index视图;

2.调用Index视图之前,默认会先调用

View视图文件夹下的_Viewstrat.cshtml文件,

(补充:如果在一个控制器对应文件夹下添加一个_Viewstrat.cshtml文件,则会先执行View文件夹下的_Viewstrat.cshtml文件在执行对应控制器文件夹下的_Viewstrat.cshtml文件,接着在调用指定控制器下的cshtml)

文件代码如下:

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

  指向框架_Layout.cshtml文件

3._Loyout.cshtml文件的代码如下:

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

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

  这个时候 不会直接执行_Loyout.cshtml  而是先执行Index.cshtml视图文件

将Index.cshtml文件

执行完毕之后才会继续执行母版视图,_Layout.cshtml文件,Index.cshtml文件的内容填补在_Layout.cshtml的@RederBody()的位置

最后加载完_Layount.schtml文件呈现给用户

最后结果如下:

 

 

 

所以开发者可以直接修改_Layout.cshtml文件代码 作为框架文件,新增其他视图的时候 勾选“使用布局或母版页“ ,然后浏览到母版页,如下操作

单击添加即可。

 

最后介绍一种可以添加自己母版页并进行应用的方法:

可以在View/Shared文件夹下添加母版页:_OverallTemplate.cshtml文件 并书写你所要的全局母版页,如下图例子:

然后在Index视图新增的时候勾选,选择该母版页即可,最终效果会将Index.cshtml的内容显示在@RenderBody()位置上。

Index.cshtml代码如下:

重点:占位符的解释

 @RenderSection("loadCss", false)
 @RenderBody()
  @RenderSection("script", false)

  @RenderSection("loadCss",false)   表示一个占位  可以在View中书写需要的css样式或者js代码/文件, 括号中第二个参数 表示,在View中,false表示可以不适用这个占位,如果不填写false或者填写true则必须在View书写一下代码:

 @section  loadCss{
    h1{
       margin:0 auto;
       }
 }
//或者
@section loadCss{

<script type="text/javascript">

$(function () {

alert("hello jquery");

});

</script>

}

  

以此在视图中加载新的css或者 js代码,否则可能会抛出异常!!

当然我们可以在母版页加判断以此来避免异常:

//当我在母版页中定义了@RenderSection("SubMenu",false)的时候,我希望当所有子页都 没有实现这个Section 的时候,母版页可以有自己的呈现内容,就可以用

 

 <div id="sideBar">
       @if (IsSectionDefined("loadCss"))
        {
            @RenderSection("loadCss", false)
        }
        else
        {
            <p>loadCss Section is not defined!</p>
        }
 </div>

  

 

 

 

本文章为作者自己书写,如有引用请注明出处,如有不正之处请留言提出,谢谢!

 

posted on 2016-12-16 17:49  拯&救  阅读(411)  评论(0编辑  收藏  举报