第8章 MVC Layout布局(3学时) 2
时间：2026-01-23
.NET架构主讲教师张智计算机学院
J2EE架构
第8章 MVC Layout布局8.1@RenderBody() 8.2@RenderPage()8.3@RenderSection()
8.4布局示例：在线花店
J2EE架构
8.1@RenderBody()
--呈现子页的主体内容
(1)新建一个名为TestLayout的空控制器
J2EE架构
(2) Views/Shared/下新建一个MVC 5布局页(Razor),命名为_MyLayout.cshtml。
J2EE架构
_MyLayout.cshtml布局代码(自动生成)<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><title>@ViewBag.Title</title></head><body><div>@RenderBody():呈现子页的主体内容@RenderBody()该方法不需要参数，而且只能出现一次</div></body></html>
J2EE架构
(3)在TestLayout控制器中添加Index视图
Index视图使用自定义的布局
J2EE架构
Index视图代码@{ ViewBag.Title="测试布局"; Layout="~/Views/Shared/_MyLayout.cshtml";}<h2>Index</h2>
视图使用的布局
J2EE架构
运行Index视图
J2EE架构
修改一下_MyLayout布局<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><title>@ViewBag.Title</title></head><body>新添加的内容<div><div id="header">==这里是布局页面内容1==</div>@RenderBody()<div id="footer">==这里是布局页面内容2==</div></div></body></html>
J2EE架构
运行Index视图
子页的主体内容
布局页面的内容
【返回】
J2EE架构
8.2@RenderPage() --呈现指定页面的内容在~/Views/TestLayout/文件夹中新建一个名为TestPage.cshtml的MVC 5 Razor视图页。
J2EE架构
TestPage页面代码(自动生成)@{ Layout= null;}<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><title></title></head><body>该页面添加的内容<div>==这是测试页面内容==</div></body></html>
J2EE架构
修改一下_MyLayout布局<body><div>@RenderPage:呈现指定页面的内容<div id="header">@RenderPage("~/Views/TestLayout/TestPage.cshtml")</div>@RenderBody()<div id="footer">==这里是布局页面内容2==</div></div></body>
J2EE架构
运行Index视图
布局页面中@RenderBody()呈现的子页主体内容
布局页面中@RenderPage呈现的指定页面的内容
布局页面的内容
【返回】
J2EE架构
8.3@RenderSection()如果视图中定义了一个节，那么可以在布局中把它单独呈现出来。视图中定义节：@section节名{节的内容}如果子页面中定义了节则布局必须呈现之 true:表示必须显示节，如果子视图中没有定义该节，则会出现异常。 false:表示可选，子视图没有有定义节都不会产生异常。
布局中显示节：@RenderSection("节名");@RenderSection("节名", false);
J2EE架构
Index视图代码 --子页面定义节@{ ViewBag.Title="测试布局"; Layout="~/Views/Shared/_MyLayout.cshtml";}<h2>Index</h2>子页视图中定义了一个名为"footer"的节
节代码可在页面任意位置定义
@section footer{<div>==这里是Section内容==</div>}<h2>随便写点</h2>
第8章 MVC Layout布局(3学时) 2.doc
将本文的Word文档下载到电脑
