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> }
这样 section 中的内容<lable>Copyright ©2013 Tom</lable>将显示在布局页的p标签中
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天,连电脑都不想碰,所以就一直拖着,上一篇写了前端实现 ...
随机推荐
- ANDROID_MARS学习笔记_S01原始版_022_MP3PLAYER002_本地及remote标签
一.简介 1.在main.xml中用TabHost.TabWidget.FrameLayout标签作布局 2.在MainActivity中生成TabHost.TabSpec,调用setIndicato ...
- 目录重定向的源代码工程( linux平台利用VFS实现目录重定向驱动)虚拟磁盘MINIPORT驱动代码(雨中风华)
http://download.csdn.net/user/fanxiushu/uploads/2 http://download.csdn.net/user/fanxiushu/uploads/1
- 总结一下SQL语句中引号(')、quotedstr()、('')、format()在SQL语句中的用法
总结一下SQL语句中引号(').quotedstr().('').format()在SQL语句中的用法 日期:2005年6月1日 作者:seasky212 总结一下SQL语句中引号(').quoted ...
- Notification 多次传递参数 一直都是旧的 解决
参考 :http://blog.163.com/caoguoqiang_dlut/blog/static/10658914220114167219320/ 问题描述: 在service中获取到数据,通 ...
- 【HDOJ】1022 Train Problem I
栈和队列训练题目. #include <stdio.h> #include <string.h> #define MAXNUM 1005 char in[MAXNUM]; ch ...
- bzoj1443
首先要思考的问题肯定是,什么点可以是ans, 不难想到对图黑白染色,假如一个棋子不管怎么走,都只能走到和它同色的点上时,这就是一个ans 再考虑,每次棋子的移动都是黑白相间的 再考虑,黑白染色是可以构 ...
- TFS源代码管理
一.服务器配置 1.创建一个Visual Studio Online账户 打开VS,选择团队资源管理器(视图菜单下),然后在团队资源管理器中选择注册Team Foundation Service,打开 ...
- DD_belatedPNG,IE6下PNG透明解决方案
我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间. 然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是expression,再到javascr ...
- 【转】linux /usr/bin/ld cannot find 解决
原文网址:http://blog.csdn.net/mzwang123/article/details/6702889 问题:在linux环境编译应用程式或lib的source code时常常会出现如 ...
- (转载)腾讯CMEM的PHP扩展
(转载)http://blog.renren.com/share/223341289/7693783476 题外话 最近公司在做相关的业务,由于Memcached协议缺少返回码,为了保证业务数据的安全 ...