布局 Page 和 Section

Posted on 8 月 17, 2026 by jack

前言

网站很多网页会存在重复内容，例如底部版权、头部Logo菜单。不需要每个页面重复写一遍代码。

Page：把通用、多处复用的内容封装到独立razor页面，需要的地方直接调用引入。

Page（`RenderPage`）

作用：在当前页面输出另外一个.cshtmlRazor文件的内容，多用于头部、页脚公共片段。
语法：@RenderPage("文件虚拟路径")

示例

新建页脚片段 _Foot1.cshtml（放在Views/Shared）

<div style="width:100%;height:30px;background‑color:gray;">前台</div>Code language: HTML, XML (xml)

在布局模板 _Layout.cshtml 使用RenderPage引入

<body>
    <div style="width:100%;height:30px;background‑color:red;">头部logo</div>

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)

    <div>@RenderBody()</div>
    <!--引入独立的页脚页面-->
    @RenderPage("~/Views/Shared/_Foot1.cshtml")
</body>Code language: HTML, XML (xml)

@RenderBody()：布局模板的“坑位”，使用该布局的子视图的全部主体内容，会填充到这里。
子视图指定布局：

@{
    ViewBag.Title = "Index2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index2</h2>Code language: HTML, XML (xml)

浏览器访问，头部logo、子页面内容、RenderPage引入的页脚会全部渲染输出。

Section（`RenderSection`）

RenderBody()只能填充一整块子页面内容。如果需要多个可填充坑位，就使用Section。

语法

布局页面（Layout）定义坑位

@RenderSection("HotNews")
<!-- required:false 代表该区块可选，子页面不写也不会报错；默认true，必填 -->
@RenderSection("RecomentNews", required:false)

<!-- 判断Section是否被子页面定义，安全写法 -->
@if (IsSectionDefined("RecomentNews"))
{
    @RenderSection("RecomentNews")
}Code language: HTML, XML (xml)

子视图里面填充Section内容

@{
    Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}
<h2>注册代码 body部分</h2>

@section HotNews
{
    <p>热门新闻</p>
    <p>热门新闻</p>
    <p>热门新闻</p>
}Code language: HTML, XML (xml)

参数说明

@RenderSection("名字")：默认required:true，必填，子页面不写会直接报错。
@RenderSection("名字",false)：可选区块，子页面可以不实现。
IsSectionDefined("区块名")：判断子视图有没有定义这个section，避免报错。

RenderBody / RenderPage / RenderSection 对比

API	作用
`@RenderBody()`	子页面全部主体内容填充到此，一个布局只能有1个
`@RenderPage("路径")`	引入执行另外一个独立cshtml片段，直接渲染文件
`@RenderSection("name",false)`	定义多个自定义坑位，子页面用`@section xxx{ }`填充

小提示：

RenderPage：引入外部独立页面文件；

RenderSection：子视图内部划分多个内容块，在布局预留位置接收。

Previous: Layout布局

Next: Razor Helper

Posted in Razor

发表回复取消回复