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

admin
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>
}



测试下

有了这些变化的地方,如果我们浏览到/Home/Details我们可以看到<script>刚刚结束标签之前,包括标签。如果我们导航到/Home/Index,我们看不到 <script> 标记。

文章说明

如果您觉得我的文章质量还不错,欢迎打赏,也可以订阅我的视频哦
未得到授权不得擅自转载本文内容,52abp.com 保留版权

感谢您对我的支持

关注微信公众号:角落的白板报

公众号:角落的白板报