MVC - 布局

布局类似于APSX视图的母版页用的是Razor的语法

创建布局

布局页面默认放在Shared目录有几个自动生成的cshtml文件删除它们然后创建一个视图命名为MyLayOut 取消勾选使用母版页或布局打开该文件删除以下代码

 @{
     Layout = null;
 }

我们将这个文件当做一个布局页面来使用首先需要修改Views目录下的_ViewStart.cshtml 因为我们删掉了默认的布局页所以在此视图中需要修改Layout的值让其指向我们自定义的布局页

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

接着就可以使用以下方法来渲染子页面视图到布局页面中

RenderBody方法

渲染一个子视图只要子视图是根据当前布局页创建的则RenderBody指向的就是该视图如

 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <title>MyLayOut</title>
 </head>
 <body>
     <div style="background:#ff5252;width:400px;height:100px;font:12px 微软雅黑;padding:10px;color:white;">
         <h1>布局页</h1>
  　　  </html>

然后在控制器中创建一个ChildPage的Action方法

 public ActionResult ChildPage()
 {
     return View();
 }

为该Action创建一个视图选择MyLayOut作为布局页

生成的ChildPage如下在视图中创建一个div 输入文本ChildPage

 @{
     ViewBag.Title = "ChildPage";
     Layout = "~/Views/Shared/MyLayOut.cshtml";
 }
 <lable>ChildPage</lable>

运行一下请求default/childpage 结果如图

RenderPage方法

此方法是将一个固定的视图页面渲染到布局页中可以在布局中多次使用而RenderBody指向的是一个动态的视图只能在布局中使用一次只要A视图是引用布局页创建的那么访问A视图就会先加载布局页布局页的RenderBody指的就是A视图如果B视图也引用了布局页那么访问B视图也会先加载布局页布局页RenderBody指的就是B视图

比如我们可以将菜单这种固定的视图渲染到布局中首先我们修改一下布局页

 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <title>MyLayOut</title>
 </head>
 <body>
     <div style="background:#ff5252;width:600px;height:250px;font:12px 微软雅黑;padding:10px;color:white;">
         <h1>布局页</h1>
         <div>
             <div style="float:left;">@RenderPage("~/Views/Default/Menu.cshtml")</div>
             <div style="float:left;margin-left:30px;background:black; width:200px;">@RenderBody()</div>
         </div>
     </div>
 </body>
 </html>

现在还没有Menu视图创建一个Action方法Menu 为其添加视图选择分布视图取消勾选使用母版页或布局

 .uls1{
     margin:0;
     padding:0;
     list-style:none;
 }

 .links1{
     color:white;
     font:13px Arial;
     display:block;
     border-left:12px solid #87bbbc;
     border-right:1px solid #87bbbc;
     padding-right:2px;
     text-decoration:none;
 }

 .lis1{
     border-bottom:1px solid #b0eeef;
 }
 .links1:hover{
     background:#8fc9b8;
     border-left:12px solid white;
 }
 .deadenlink{
     background:#87bcac;
     border-left:12px solid black;
     color:white;
     font:13px Arial;
     display:block;
     border-left:12px solid black;
     border-right:1px solid #87bbbc;
     padding-right:2px;
     text-decoration:none;
 }
 .deadenlink:hover{
     background:#b0d5ef;
     border-left:12px solid #e60b39;
 }

 </style>
 <div class='navigationbox'>
     <ul class="uls1">
         <li class="lis1"><a href='#' class="links1">Google</a></li>
         <li class="lis1"><a href='#' class="links1">Microsoft</a></li>
         <li class="lis1"><a href='#' class='deadenlink'>Netscape</a></li>
         <li class="lis1"><a href='#' class="links1">W3C</a></li>
         <li class="lis1"><a href='#' class="links1">线性代数</a></li>
         <li class="lis1"><a href='#' class='deadenlink'>斯诺克</a></li>
         <li class="lis1"><a href='#' class="links1">芝宝打火机</a></li>
         <li class="lis1"><a href='#' class="links1">吴哥窟</a></li>
     </ul>
 </div>

运行一下请求default/childpage 结果如图可以看到布局页加载了一个固定的视图Menu 和一个动态的ChildPage视图

RenderSection方法

该方法声明了一个占位符它会渲染指定的视图的一个部分此方法专门用于使用了布局的各个视图可以设置视图中某一部分的数据要显示在布局页中的某个位置上我们知道RenderBody在布局页面中只能使用一次而无法很灵活的将视图的某一部分定位在布局页面的某个位置 RenderSection可以解决这个问题该方法参数1指定的是一个占位符的名字参数2指定的是内容是否是必须的一般设为false即可在布局中如下使用该方法

 @RenderBody()
 <p>@RenderSection("part",false)</p>

在ChildPage视图中通过section 指定要使用的占位符名字

 @{
     ViewBag.Title = "ChildPage";
     Layout = "~/Views/Shared/MyLayOut.cshtml";
 }
 <lable>ChildPage</lable>
 @section part{
         <lable>Copyright ©2013 Tom</lable>
 }

MVC - 学习总目录

MVC - 布局的更多相关文章

IOS 整体架构和 MVC布局
IOS的生态系统 IOS生态系统不仅仅是指产品,更重要的是指 iPhone/iPad/iPod/Mac +iCloud+App整个系统,包括Siri (部分设备不支持).FaceTime.Safari ...
Best MVC Practices(最优的MVC布局)
Best MVC Practices 最优的MVC布局策略 Model View Controller 1.数据层 2.视图层 3.控制器层 Although Model-View-Controlle ...
ASP.NET MVC布局
一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...
ASP.Net MVC 布局页模板页使用方法详细说明
一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...
mvc布局（一）
negut添加Optimization @System.Web.Optimization.Styles.Render( "~/Content/styles/css/font-awesome. ...
MVC布局页占位符@RenderSection("bscript", false)
@RenderSection("bscript", false) //false表示不是必须填充填充bscript占位符 @section bscript{}
MVC之LayOut布局页
LayOut布局页,就是相当于WebForm中母版页,实现了一个代码的共用和公共布局的作用. 布局页的使用 (1)添加新项,选择MVC布局页 <!DOCTYPE html> <htm ...
ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步
一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...
从零开始，搭建博客系统MVC5+EF6搭建框架（4）下，前后台布局实现、发布博客以及展示。
一.博客系统进度回顾目前已经完成了,前台展示,以及后台发布的功能,最近都在做这个,其实我在国庆的时候就可以弄完的,但是每天自己弄,突然最后国庆2天,连电脑都不想碰,所以就一直拖着,上一篇写了前端实现 ...

随机推荐

USB CDC类
现代嵌入式系统中,异步串行通信接口往往作为标准外设出现在单片机和嵌入式系统中.但是随着个人计算机通用外围设备越来越少地使用串口,串口正在逐渐从个人计算机特别是便携式电脑上消失.于是嵌入式开发人员常常发 ...
tlplayer for ios V1.1.2加密测试版本(修复1.1.1版本 for ios7播放闪退问题)
此版本主要修复了ios7播放列表导致的程序闪退问题,方便大家测试加密与非加密视频. 此为tlplayer for ios版本,可以播放加密视频与非加密视频. 加密视频下载地址:http://blog. ...
Emeditor所有快捷键操作
新建文本 Ctrl+N 创建一个新的文本文件. 打开 Ctrl+O 打开一个已存在的文件. 保存 Ctrl+S 保存当前文件. 重新 ...
c/c++ void 指针
原文 : http://blog.csdn.net/yyyuhan/article/details/3153290 1.概述许多初学者对C/C++语言中的void及void指针类型不甚理解,因此在使 ...
[转] 舞蹈链（Dancing Links）——求解精确覆盖问题
转载自:http://www.cnblogs.com/grenet/p/3145800.html 精确覆盖问题的定义:给定一个由0-1组成的矩阵,是否能找到一个行的集合,使得集合中每一列都恰好包含一个 ...
从头开始编写一个Orchard网上商店模块(1) - 介绍
原文地址:http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-par ...
windows API中的各种字符串的本质
windows 库中的各种string, char, wchar, TCHAR, lpstr, lpwstr, lpcwstr , cstring , BSTR, _bstr_t 等 ...
“System.Exception”类型的异常在 NHibernate.dll 中发生，但未在用户代码中进行处理
“System.Exception”类型的异常在 NHibernate.dll 中发生,但未在用户代码中进行处理其他信息: OCIEnvCreate 失败,返回代码为 -,但错误消息文本不可用. 如 ...
C程序设计习题之1-20 detab
码农一定是最需要动手实操的行业之一.有一句话叫,好记性不如烂笔头,牵强附会引申到这里,变成看书百遍,不如码字运行一遍.是不是有那么一点味道?哈哈! 这几天看的<C程序设计>,看完每个章节还 ...
sqlplus中常用设置参数
一.各种设置参数解释转自http://baike.baidu.com/view/1239908.htm Sql*plus是一个最常用的工具,具有很强的功能,主要有: 1. 数据库的维护,如启动,关闭 ...

MVC - 布局

MVC - 布局的更多相关文章

随机推荐

热门专题