要点：
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，可谓是非常...
V3Layout布局软件是一款专为显示屏箱体设计的工具，其主要功能是帮助用户生成用于控制显示屏显示数据流的XML文件。在LED显示屏领域，精确的布局设计对于保证画面的清晰度和同步性至关重要，V3Layout正是为了解决这个...
本篇文章将深入探讨如何在Android中进行自定义Layout布局的开发。 首先，创建自定义Layout首先要创建一个新的Java类，继承自`ViewGroup`或`LinearLayout`等现有布局。选择`ViewGroup`是因为它是所有布局的基础类，...
本练习文件集合包含了一系列的`layout`布局文件，旨在帮助你深入理解和熟练运用`ConstraintLayout`的各种特性和属性。 `ConstraintLayout`的核心在于其基于约束的布局系统，它可以将视图相互连接，形成一个灵活的...
4. **动态更新**：在需要改变布局时，可以调用相应的API进行更新，例如添加、删除或改变元素的布局属性。 四、示例代码 ```javascript // 引入layout.js <script src="path/to/layout.js"> // 定义布局 var ...
本项目“iOS声明式Layout布局”是一个开源项目，旨在提供一个易于理解和使用的声明式布局框架，帮助开发者更高效地构建iOS应用的用户界面。 在iOS中，传统的布局方式是通过AutoLayout，这是一个强大的系统，但它的...
### Android Layout布局分析与优化 #### 一、概述 在Android开发中，高效的布局设计对于提升应用性能至关重要。本文将详细介绍如何使用Hierarchy Viewer工具进行布局分析，并基于分析结果提出优化建议，帮助开发者...
FlexLayout布局是现代网页设计中常用的一种布局方式，它基于CSS3中的 Flexible Box 模块，简称 Flexbox。这种布局模式极大地提高了网页设计的灵活性，能够轻松处理元素的对齐、排列以及尺寸调整，尤其在响应式设计和...
4. 如果需要，可以调整布局的属性，如边距、间距等，使用`setMargin()`, `setSpacing()`等方法。 5. 最后，当容器的大小改变时，布局会自动调整控件的位置和大小，以适应新的空间。 在实际应用中，我们还可以组合...
Layoutit的工作原理是利用Bootstrap的12列网格系统，通过预设的间距和响应式断点，确保页面在不同设备上都能自适应显示。用户可以选择不同的行和列组合，然后将Bootstrap组件放入这些网格中。此外，Layoutit还支持...
布局(Layout)在Android软件开发上的重要角色”这一主题时，我们首先需要理解布局（Layout）在Android开发环境中的核心地位。布局不仅关乎界面设计的美观，更是连接用户与功能的关键桥梁，其重要性不言而喻。 ### ...
在Android开发中，布局动画（Layout Animation）是一种增强用户界面体验的重要技术，它使得应用程序的UI元素在显示或消失时有动态效果，从而提升应用的视觉吸引力和用户体验。本示例"03_Layout Animation 布局动画...
在微信小程序开发中，FlexLayout布局是一种非常重要的布局方式，它允许开发者在有限的空间内灵活地安排元素，尤其适用于各种屏幕尺寸和...在实际项目中，开发者需要根据需求灵活调整布局属性，以达到理想的设计效果。
在LayoutIT中，用户可以直观地构建网页布局，无需编写一行代码。这个中文版特别适合中国用户，减少了语言障碍，使得更多的人能够轻松上手。工具提供了一系列预设的组件和样式，如网格系统、导航栏、按钮、表单、图像...
在Android开发中，布局（Layout）的创建通常在XML文件中完成，通过定义各种属性来确定各个组件的位置和大小。创建布局的步骤包括：创建XML文件，定义根布局标签，添加View或ViewGroup，设置各元素属性，最后在Java...
Auto Layout是Apple的界面布局系统，它允许开发者定义界面元素之间的关系，包括位置和大小，以便在各种屏幕尺寸下自动调整布局。通过使用约束（Constraints），我们可以确保UI元素在屏幕尺寸变化时能够正确地重新...
### Android自适应屏幕大小与Layout布局详解 #### 一、不同屏幕尺寸的适应性设计 在Android应用开发中，为了确保应用能够在各种不同尺寸的屏幕上正常显示，开发者需要考虑多种屏幕分辨率的情况。例如，常见的屏幕...
在微信小程序开发中，FlexLayout布局是至关重要的一个部分，它是一种基于CSS的布局模式，专为适应不同屏幕尺寸和方向而设计。Flex布局能够帮助开发者轻松地创建响应式界面，使得元素能够在容器中灵活地排列和分配...
FlexLayout布局是微信小程序中用于构建响应式界面的重要工具，它基于CSS Flexible Box（简称Flex布局）模型，能够帮助开发者更灵活地调整元素在不同屏幕尺寸下的位置和大小，以适应多种设备和屏幕方向。 在Flex...
Layoutit Bootstrap3是这个框架的一个扩展，它是一个可视化的布局系统，特别适用于快速原型设计和网页布局的构建。在这个中文版中，洋洋创意网络为国内用户提供了方便，将原本英文版的Layoutit翻译成了中文，使得不...