ASP.NET Core MVC 中布局页面中 Sections

admin

2021-06-03

本文作者：梁桐铭- 微软最有价值专家(Microsoft MVP)
本文出自《从零开始学 ASP.NET Core 与 EntityFramework Core》目录
视频课程效果更佳：跨平台开发实战掌握 ASP.NET Core 与 EntityFramework Core

ASP.NET Core MVC 中布局页面中 Sections

在本章节中，我们将讨论 ASP.NET Core MVC 中布局页面中的节点(Section)。

布局视图中的 Sections

ASP.NET Core MVC 中的布局页面还可以包含一些节点(Section)。节点(Section)可以是选填的也可以是必填的。它提供了一种方法来让某些页面元素有组织的放置在一起。

举个栗子

您有一个自定义 JavaScript 文件，项目中的只有一些视图才需要这些文件。在结束标记之前将 JavaScript文件放在页面底部是一个好习惯。但是如果所有视图都需要自定义 JavaScript 文件，那么我们可以将它放在 Layout 页面中，如下所示。

<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>

    <script src="~/js/CustomScript.js"></script>
</body>
</html>

在我们的例子中，我们不需要在每个视图中使用自定义 JavaScript 文件。假设我们只在 Details 视图中需要它，而在其他视图中不需要它。我们就可以使用一个节点(Section)。

渲染 Sections

在布局页面中，在要渲染节内容的位置调用 RenderSection()方法。在我们的例子中，我们希望 JavaScript 文件包含在结束标记之前。我们把@RenderSection() 放置在结束标记之前。

RenderSection()方法有 2 个参数。第一个参数指定节的名称。第二个参数参数指定该部分是必需的还是可选的。

<html>
  <head>
    <meta name="viewport" content="width=device-width"/>
    <title>@ViewBag.Title</title>
  </head>
  <body>
    <div>
      @RenderBody()
    </div>

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

如果 required 设置为 true，而内容视图不包含该部分，则会出现以下错误。

invalidoperationexception: The layout page "/Views/Shared/_Layout.cshtml" cannot
  find the section "Scripts" in the content page "/Views/Home/Index.cshtml" .;

使布局部分可选

有两个选项可将布局部分标记为可选

选项 1：将 RenderSection()方法的必需参数设置为 false

@rendersection ("Scripts", required: false);

选项 2：使用 IsSectionDefined()方法

@if (IsSectionDefined("Scripts")) {
  @rendersection ("Scripts", required: false);
}

提供节内容

要使用节点，那么每个视图都必须包含具有相同名称的部分。我们使用@section 指令包含该部分并提供如下所示的内容。

在我们的示例中，我们希望 Details 视图在布局页面的"Scripts"节点中包含<script>标记。为此，我们在 Details.cshtml 中包含"Scripts"节点，如下所示。

@model StudentManagement.VIewModels.HomeDetailsViewModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "学生详情页";

}
    <h3>@Model.PageTitle</h3>

    <div>
        姓名 : @Model.Student.Name
    </div>
    <div>
        邮箱 : @Model.Student.Email
    </div>
    <div>
       主修科目 : @Model.Student.Major
    </div>

@section Scripts{
    <script src="~/js/CustomScript.js"></script>
}