@RenderBody() @RenderSection @RenderPartial 用法

最新推荐文章于 2025-06-08 10:27:13 发布

人人都叫我渔歌

最新推荐文章于 2025-06-08 10:27:13 发布

阅读量893

点赞数 11

CC 4.0 BY-SA版权

文章标签：前端 java javascript

本文链接：https://blog.youkuaiyun.com/zhangyu0412326/article/details/146240138

在 ASP.NET Core 的 Razor 视图引擎中，@RenderBody() 是用于在布局页面（_Layout.cshtml）中渲染具体视图内容的核心方法。默认情况下，@RenderBody() 只能在布局页面中出现一次，因为它表示视图的主体内容。如果需要在一个布局页面中引用多个视图内容区域，可以使用 @RenderSection 或 @RenderPartial 来实现。

以下是关于如何在布局页面中引用多个视图内容的详细说明和示例：

1. 默认情况：`@RenderBody()`

@RenderBody() 用于渲染视图的主体内容。例如：

布局页面 (`_Layout.cshtml`)

html

复制

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <header>
        <h1>Header</h1>
    </header>

    <main>
        @RenderBody() <!-- 渲染视图的主体内容 -->
    </main>

    <footer>
        <p>Footer</p>
    </footer>
</body>
</html>

运行 HTML

视图页面 (`Index.cshtml`)

html

复制

@{
    Layout = "_Layout";
}

<p>This is the main content.</p>

运行 HTML

2. 使用 `@RenderSection` 定义多个内容区域

如果需要在一个布局页面中定义多个内容区域，可以使用 @RenderSection。@RenderSection 允许在布局页面中定义命名的区域，并在视图页面中填充这些区域。

布局页面 (`_Layout.cshtml`)

html

复制

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <header>
        <h1>Header</h1>
    </header>

    <aside>
        @RenderSection("Sidebar", required: false) <!-- 可选的侧边栏区域 -->
    </aside>

    <main>
        @RenderBody() <!-- 渲染视图的主体内容 -->
    </main>

    <footer>
        @RenderSection("Footer", required: false) <!-- 可选的页脚区域 -->
    </footer>
</body>
</html>

运行 HTML

视图页面 (`Index.cshtml`)

html

复制

@{
    Layout = "_Layout";
}

<p>This is the main content.</p>

@section Sidebar {
    <p>This is the sidebar content.</p>
}

@section Footer {
    <p>This is the footer content.</p>
}

运行 HTML

说明：

@RenderSection("SectionName", required: false)：定义一个可选的区域。
@RenderSection("SectionName", required: true)：定义一个必须的区域（如果视图页面未提供该区域，会抛出异常）。
在视图页面中，使用 @section SectionName { ... } 填充区域内容。

3. 使用 `@RenderPartial` 或 `@Html.Partial` 渲染部分视图

如果需要在一个布局页面中渲染多个部分视图，可以使用 @RenderPartial 或 @Html.Partial。

布局页面 (`_Layout.cshtml`)

html

复制

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <header>
        @await Html.PartialAsync("_HeaderPartial") <!-- 渲染头部部分视图 -->
    </header>

    <main>
        @RenderBody() <!-- 渲染视图的主体内容 -->
    </main>

    <footer>
        @await Html.PartialAsync("_FooterPartial") <!-- 渲染页脚部分视图 -->
    </footer>
</body>
</html>

运行 HTML

部分视图 (`_HeaderPartial.cshtml`)

html

复制

<h1>Header</h1>

运行 HTML

部分视图 (`_FooterPartial.cshtml`)

html

复制

<p>Footer</p>

运行 HTML

说明：

@Html.PartialAsync("_PartialViewName")：异步渲染部分视图。
@Html.Partial("_PartialViewName")：同步渲染部分视图。
部分视图通常放在 Views/Shared 文件夹中。

4. 结合 `@RenderBody` 和 `@RenderSection`

可以在布局页面中同时使用 @RenderBody 和 @RenderSection，以实现更灵活的布局。

布局页面 (`_Layout.cshtml`)

html

复制

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <header>
        @await Html.PartialAsync("_HeaderPartial")
    </header>

    <aside>
        @RenderSection("Sidebar", required: false)
    </aside>

    <main>
        @RenderBody()
    </main>

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

运行 HTML

视图页面 (`Index.cshtml`)

html

复制

@{
    Layout = "_Layout";
}

<p>This is the main content.</p>

@section Sidebar {
    <p>This is the sidebar content.</p>
}

@section Footer {
    <p>This is the footer content.</p>
}

运行 HTML