ASP.NET Core布局页(_Layout.cshtml)详解与实战技巧

1. 理解_Layout.cshtml的核心作用

在ASP.NET开发中，每个页面通常都需要包含相同的页眉、导航栏、页脚等元素。如果每个页面都重复编写这些代码，不仅效率低下，维护起来更是噩梦。这就是_Layout.cshtml存在的意义 - 它作为整个应用的"母版页"，定义了所有页面的公共结构和外观。

典型的_Layout.cshtml文件结构如下：

html复制<!DOCTYPE html>
<html>
<head>
    <!-- 公共的meta标签、CSS引用等 -->
</head>
<body>
    <!-- 公共的导航栏 -->
    @RenderBody()
    <!-- 公共的页脚 -->
    <!-- 公共的JS脚本引用 -->
</body>
</html>

关键点在于@RenderBody()这个Razor指令，它相当于一个占位符，标记了各个具体页面内容将被注入的位置。当请求到达时，ASP.NET会先将具体视图的内容渲染到@RenderBody()所在位置，再将完整的HTML返回给客户端。

2. 创建和配置布局页的完整流程

2.1 新建_Layout.cshtml文件

在ASP.NET Core项目中，布局页通常存放在以下位置：

• Razor Pages项目：/Pages/Shared/_Layout.cshtml
• MVC项目：/Views/Shared/_Layout.cshtml

创建步骤：

1. 在Shared文件夹上右键 → 添加 → 新建项
2. 选择"Razor布局页"模板
3. 命名为"_Layout.cshtml"（注意下划线前缀是约定）

2.2 基础布局页代码解析

一个完整的_Layout.cshtml通常包含以下部分：

html复制<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MyApp</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <!-- 导航栏内容 -->
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - MyApp - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

2.3 设置默认布局

要让所有页面自动使用这个布局，需要在_ViewStart.cshtml中设置：

html复制@{
    Layout = "_Layout";
}

这个文件通常放在Pages或Views文件夹的根目录下，会在所有视