要点: A.Layout属性:等同于原来的MasterPageFile属性. B.@RenderBody()方法:直接渲染整个View到占位符处,而不需要原来所使用的<asp:Content />. C.@RenderPage()方法:渲染指定的页面到占位符处. D.@RenderSection方法:声明一个占位符,和原来的<asp:ContentPlaceHolder />功能类似. E.@section标记:对@RenderSection方法声明的占位符进行实现,和原来的<asp:Content />功能类似. 1.@RenderBody()方法的使用 首先在~/Views/Shared/下创建一个名为_MyLayout.cshtml的LayoutPage文件,并将默认的内容替换为如下: <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> </head> <body> <div> 开始渲染Body<br /> @RenderBody() 渲染Body结束<br /> </div> </body> </html> 然后打开在~/Views/Home/Index.cshtml文件并替换为如下的内容: @{ ViewBag.Title = "首页"; } <div> 这里就是渲染Body啦. </div> 最后别忘记把~/Views/_ViewStart.cshtml中的Layout属性改为: Layout = "~/Views/Shared/_MyLayout.cshtml"; 浏览器输出: 开始渲染Body 这里就是渲染Body啦. 渲染Body结束 在此,你或许会有疑问了.在_Layout中定义的RenderBody()是Render那个页啊? 答:其实最后Render页的归属就是Render你所访问的那个页,比如你访问/Home/Index.那么Render就是Home控制器下的Index.cshtml这个文件, 如果访问的是/Ohter/SomePage时,那么Render的是Ohter控制器下的SomePage这个.cshtml! 2.@RenderPage()方法的使用 在~/Views/Home/文件夹下新建立一个ViewPage1.cshtml文件,将内容改为如下: <div> 这里是~/Views/Home/ViewPage1.cshtml </div> 并在原来的_MyLayout.cshtml文件中增加几行代码变成下面的这个样子: <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> </head> <body> <div> 开始渲染Body<br /> @RenderBody() 渲染Body结束<br /> <br /> 开始渲染其他页1<br /> @RenderPage("~/Views/Home/ViewPage1.cshtml") 渲染其他页结束1<br /> 开始渲染其他页2<br /> @RenderPage("~/Views/Home/ViewPage1.cshtml") 渲染其他页结束2<br /> 开始渲染其他页3<br /> @RenderPage("~/Views/Home/ViewPage1.cshtml") 渲染其他页结束3<br /> </div> </body> </html> 在这里记住:@RenderBody()只能在_Layout.cshtml中使用一次,而@RenderPage()则可以使用多次!另外@RenderPage()是直接定位View页面,不会运行对应的Action方法。 3.@RenderSection方法和@section标记 @RenderSection()方法等价于<asp:ContentPlaceHolder />,用途为在Layout中声明一个占位符. 在原来的_MyLayout.cshtml文件中更改内容为如下: <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> </head> <body> <div> 开始渲染Body<br /> @RenderBody() 渲染Body结束<br /> <br /> 开始渲染其他页1<br /> @RenderPage("~/Views/Home/ViewPage1.cshtml") 渲染其他页结束1<br /> 开始渲染其他页2<br /> @RenderPage("~/Views/Home/ViewPage1.cshtml") 渲染其他页结束2<br /> 开始渲染其他页3<br /> @RenderPage("~/Views/Home/ViewPage1.cshtml") 渲染其他页结束3<br /> <br /> HOHO,开始学习Section了<br /> 开始渲染Section<br /> 声明方式1(推荐):SectionA:<br /> @RenderSection("SectionA", false) -------<br /> 声明方式2:SectionB:<br /> @{ if (IsSectionDefined("SectionB")) { @RenderSection("SectionB") } } -------<br /> 渲染Sction结束<br /> </div> </body> </html> 在~/Views/Home/Index.cshtml中更改为如下内容: @{ ViewBag.Title = "首页"; } @section SectionA{ <div>这里是SectionA:也不需要写神马runat="server"啊,有木有</div> } @section SectionB{ <div>这里是SectionB:也不需要写神马<asp:Content />啊,有木有</div> } <div> 这里就是渲染Body啦.~~不需要写神马<asp:Content />,其实因为RenderBody()不在有歧义. </div> 最后显示结果: 开始渲染Body 这里就是渲染Body啦. 渲染Body结束 开始渲染其他页1 这里是~/Views/Home/ViewPage1.cshtml str1 str2 渲染其他页结束 开始渲染其他页2 这里是~/Views/Home/ViewPage1.cshtml str1 str2 渲染其他页结束 开始渲染其他页3 这里是~/Views/Home/ViewPage1.cshtml str1 str2 渲染其他页结束 HOHO,开始学习Section了 开始渲染Section 声明方式1(推荐):SectionA: 这里是SectionA ------- 声明方式2:SectionB: 这里是SectionB ------- 渲染Sction结束 问:为什么为什么要推荐方式1呢? 答:因为RenderSection()方法有2个重载. 如果使用第一个只接受一个string类型参数的重载的话.~如果你在具体的View中没有利用@section来定义实现的话,运行会报错.所以需要配合另外一个方法IsSectionDefined()来使用,才能防止报错. 而使用第2个重载就可以利用第二个bool类型的参数指明该Section是否为必须的.所以可以在使用该RenderSection方法的时候直接利用第二个重载,再把bool参数值设为false,即使你在具体的View中没有声明实现@section,运行起来也一如既往地蛋定,不Show黄页.
相关推荐
本源代码将研究学习微信小程序的FlexLayout布局实例,微信小程序界面设计实例,是一种流布局的实现例子,而不是大家熟悉的盒子式布局,据说即使需要深层的嵌套,FlexLayout布局的响应速度也不会超过1ms,可谓是非常...
layoutit 可视化布局 bootStrap3在线编辑器源码 离线中文版
微信小程序-FlexLayout布局源码。资源中包含了详细的系统图文搭建教程。源码都是实际项目,经过测试可以正常稳定运行在服务器,需要具备基础服务器搭建知识,不会搭建的请谨慎购买。
智能家居系统 布局Layout.doc 学习资料 复习资料 教学资源
layoutit bootstrap3中文版可拖放排序在线编辑的bootstrap可视化布局系统 bootstrap 3.0 css框架离线生成器
React-Grid-Layout:网格布局(grid layout)系统,但专为 React 服务
layoutit+Bootstrap可视化网站编辑拖动面板布局系统是一款可拖放排序在线编辑的Bootstrap可视化布局系统,可使用的组件很多,支持栅格化排列布局,最大的亮点支持拖拽并且可视化,即拖即用,功能十分强大!
就是一个很简单的layout布局,在编程书上很常见的那种,还没有什么高档的技术,
在2013年底,因工作急需要使用layoutit,在网络上一直找不到bootstarp3.0版本的演示效果,洋洋创意网络自己翻译了layout bootstarp3版本。
v-grid-layout是Vue的网格布局系统,例如 。 这是的裸分支,它支持将GridItem嵌套在任何其他组件中 [| | ] 特征 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的...
Laravel开发-layout Laravel框架布局系统
vue-grid-layout是一个网格布局系统,类似于Gridster,用于Vue.js。深受React-Grid-Layout的启发。可拖拽。可调整大小。静态部件(不可拖拽、调整大小)。拖拽和调整大小时进行边界检查。增减部件时避免重建栅格。可...
首先,此文档是英文的;第二,此文件主要的内容为ext4文件系统在磁盘上的布局构成;
在pcb layout中我们可以从下面的几点来分析一下PCI,PCI总线的布线有什么殊要求,如何做好PCI总线的布线,首先,PCI系统是一个同步时序的体统,而且是Common clock方式进行的。
插件描述:LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局.
补丁布局内联布局系统为什么列使用内联文档流列可以垂直对齐! .push-xs-n, .pull-sm-n以缩短标记修复了用于移动设备优先的引导程序可见性实用程序嵌入内容的默认屏幕比例(16by9)安装bower i patch-layout -Snpm i...
可拖放排序在线编辑的Bootstrap可视化布局
基于reactjs插槽的布局系统 :sparkles: 特征 易于布局管理 覆盖任何组件的布局 支持包装的组件和React Fragment 轻松处理多种布局 非常轻巧〜5KB :wrench: 安装 yarn add reactjs-slot-layout :clapper_board: ...
android中非常系统的布局layout,为某培训学校Android课的上课记录,对于初学者很有用