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>
}
测试下
有了这些变化的地方,如果我们浏览到/Home/Details
我们可以看到<script>
刚刚结束标签之前,包括标签。如果我们导航到/Home/Index
,我们看不到 <script>
标记。
文章说明
如果您觉得我的文章质量还不错,欢迎打赏,也可以订阅我的视频哦
未得到授权不得擅自转载本文内容,52abp.com 保留版权
感谢您对我的支持