Web 应用程序网站通常由以下部分组成
如果没有布局视图,我们将在每个视图中,重复显示很多 HTML 代码,比如菜单栏,导航信息,关于我们,footer 页脚等等。
(1)创建布局视图
选择"Razor 布局"并单击"添加"按钮,自动生成_Layout.cshtml 文件。
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>@ViewBag.Titletitle>
head>
<body>
<div>
@RenderBody()
div>
body>
html>
@RenderBody()是注入视图特定内容的位置。如果使用此布局视图呈现 index.chtml 视图,则会在我们调用@RenderBody()方法的位置注入 index.cshtml 视图内容 。
(2)使用布局视图
布局视图与 details.cshtml 一起使用,需要修改 details.cshtml 中的代码以包含 Layout 属性。
@model StudentManagement.ViewModels.HomeDetailsViewModel @{ Layout =
"~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "Student Details"; }
<h3>@Model.PageTitleh3>
<div>
姓名 : @Model.Student.Name
div>
<div>
邮箱 : @Model.Student.Email
div>
<div>
主修科目 : @Model.Student.Major
div>
一个自定义 JavaScript 文件,项目中只有一些视图才需要这些文件。但是如果所有视图都需要自定义 JavaScript 文件,那么我们可以将它放在 Layout 页面中,如下所示。
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>@ViewBag.Titletitle>
head>
<body>
<div>
@RenderBody()
div>
<script src="~/js/CustomScript.js">script>
body>
html>
假设我们只在 Details 视图中需要它,而在其他视图中不需要它。我们就可以使用一个节点(Section)。
(1)渲染 Sections
在布局页面中,调用 RenderSection()方法。
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>@ViewBag.Titletitle>
head>
<body>
<div>
@RenderBody()
div>
@RenderSection("Scripts", required: false)
body>
html>
注意:
RenderSection()方法有 2 个参数。第一个参数指定节的名称。第二个参数参数指定该部分是必需的还是可选的。
(2)提供节内容
Details 视图在布局页面的"Scripts"节点中包含标记。
@model StudentManagement.VIewModels.HomeDetailsViewModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "学生详情页";
}
<h3>@Model.PageTitleh3>
<div>
姓名 : @Model.Student.Name
div>
<div>
邮箱 : @Model.Student.Email
div>
<div>
主修科目 : @Model.Student.Major
div>
@section Scripts{
<script src="~/js/CustomScript.js">script>
}
_ViewStart.cshtml 文件中的代码在调用单个视图中的代码之前先执行。这意味着,我们可以将公共代码移动到_ViewStart.cshtml文件中,而不用在每个单独的视图中设置 Layout 属性。
@{
Layout = "_AdminLayout";
}
(1)_ViewStart.cshtml 文件支持分层:
Home 子文件夹中 ViewStart 文件中指定的布局页面,将覆盖 Views 文件夹中 ViewStart 文件中指定的布局页面。
(2)逻辑判断调用布局视图
在_ViewStart.cshtml 中可以通过逻辑判断登录用户角色来选择对应的布局视图。
@{
if (User.IsInRole("Admin"))
{
Layout = "_AdminLayout";
}
else
{
Layout = "_NonAdminLayout";
}
}
_ViewImports.cshtml文件通常放在 Views 文件夹中。它用于引入公共命名空间,因此我们不必在每个视图中引用命名空间。
如果在 Viewimport 文件中包含以下 2 个命名空间, 则这两个命名空间中的所有类型都可用于 “Home” 文件夹中的每个视图, 而无需再次引入完整的命名空间。
@using StudentManagement.Models;
@using StudentManagement.ViewModels;
_ViewImports.cshtml 文件是分层的