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>
本文章为作者自己书写,如有引用请注明出处,如有不正之处请留言提出,谢谢!