Layout布局 - Razor

1、什么是Layout布局

Razor模板引擎，为了方便展示HTML，提供Layout布局机制。

作用：把多个页面重复的公共代码抽离到布局母版页，实现代码复用，避免每个页面重复写头部、底部、引用css/js。

Layout相当于母版模板，母版里写公共HTML，使用@RenderBody()预留占位坑，子视图页面的内容，就会填充到这个@RenderBody()的位置。

类比：写信模板，信封、称呼格式固定，只需要修改中间正文。

2、文件位置

布局文件一般放在 Views/Shared/_Layout.cshtml

Shared文件夹：存放多个视图共用的页面、布局、错误页
下划线开头：约定是布局/部分页，不可以直接浏览器访问

_Layout.cshtml（母版布局示例）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf‑8" />
    <meta name="viewport" content="width=device‑width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <!-- 公共头部 -->
    <div style="width:100%;height:30px;background‑color:red;">头部logo</div>

    <!-- 【核心】子页面内容会渲染填充在这里 -->
    @RenderBody()

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

    <!-- 公共底部 -->
    <div style="width:100%;height:30px;background‑color:gray;">网站底部</div>
</body>
</html>Code language: HTML, XML (xml)

关键方法说明

@RenderBody()
布局页面的占位坑，子视图的全部HTML内容，会输出到这个位置，布局必须有且只能有一个RenderBody()。
@RenderSection("scripts", required: false)

Section：区块，子页面可以额外定义@section脚本区块
required:false：代表这个区块不是必须，子页面不写也不会报错；如果true，子页面必须实现该section。

3、子视图页面使用布局（Regist.cshtml）

@{
    //传给布局页面的标题，布局中<title>@ViewBag.Title</title>接收
    ViewBag.Title = "Regist";
    //指定使用哪一个布局母版
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Regist</h2>
<!-- 这里写的所有内容，会填充到Layout的@RenderBody()位置 -->Code language: HTML, XML (xml)

代码解析

@{
    ViewBag.Title = "Index2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}Code language: JavaScript (javascript)

Layout = "路径"：声明当前视图要引用的布局文件
ViewBag.Title：动态向布局页面传递数据，布局页面读取@ViewBag.Title输出网页标题。

执行流程

访问Regist视图；
视图执行，读取Layout属性，加载_Layout.cshtml母版；
渲染Layout公共头部、head；
遇到@RenderBody()，把子页面Regist.cshtml的HTML输出填充到此；
继续渲染Layout剩余js、底部；
合并成完整HTML返回浏览器。

补充

可以在_ViewStart.cshtml设置全局默认Layout，就不用每个页面写Layout属性；
如果某个页面不想用布局：设置 Layout = null;；
ViewBag是动态对象，子页面赋值，布局页面读取，用来传递标题、页面标识等少量数据。

最简示例

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>网站公共头部</div>
    @RenderBody()
    <div>网站公共底部</div>
</body>
</html>Code language: HTML, XML (xml)

Index.cshtml子页面

@{
    ViewBag.Title = "首页";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>这里是首页正文内容</h1>Code language: HTML, XML (xml)

渲染后合并输出的完整HTML：

<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
</head>
<body>
    <div>网站公共头部</div>
    <h1>这里是首页正文内容</h1>
    <div>网站公共底部</div>
</body>
</html>Code language: HTML, XML (xml)

Previous: Razor 注意事项

Next: 布局 Page 和 Section