ASP.NET  CoreMVC 中的布局视图

admin
admin
2021-06-03
分享:

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

在本章节中,我们将讨论 ASP.NET Core MVC 中的布局视图

为什么需要布局视图

大多数 Web 应用程序网站通常都有以下部分组成

  • Header-头部
  • Footer-页脚
  • Menu-导航菜单
  • View-具体内容的视图

28 1

如果没有布局视图,我们将在 Web 程序中的每个视图中,重复显示很多 HTML 代码,比如菜单栏,导航信息,关于我们,footer 页脚等等。 在每个视图中都有这个重复的 HTML,这样维护我们的 Web 程序,是一场灾难,996ICU 不是梦。 例如,我们必须在导航菜单中添加或删除菜单项或更改页眉或页脚。 我们必须在每个视图中进行此更改,这显然是单调乏味,单调,耗时且容易出错,想想你如果有 400 个视图会怎么样。 我们可以在布局视图中定义它们,然后在所有视图中继承该外观,而不是在每个视图中都包含所有这些部分。

使用布局视图,在所有视图中保持一致的外观变得更加容易,因为我们只有一个要修改的布局视图文件,如果有任何更改。然后更改后将立即反映在整个应用程序的所有视图中。

ASP.NET Core MVC 中的布局视图

  • 就像常规视图一样,布局视图也具有.cshtml 扩展名的文件

  • 您可以将布局视图视为 ASP.NET Web Form 中的母版页。

  • 由于布局视图不特定于控制器,我们通常放在"Views"文件夹的子文件夹"Shared"中。

  • 默认情况下,在 ASP.NET Core MVC 中,布局视图文件名为\_Layout.cshtml

  • 在 ASP.NET Core MVC 中,有一些视图文件,如布局的视图,_ViewStart.cshtml 和_ViewImports.cshtml 等其他.cshtml 文件的文件名以下划线开头

  • 这些文件名中的前下划线表示这些文件不是直接面向浏览器。

  • 也可以在单个应用程序中包含多个布局视图文件。比如一个布局视图文件服务为管理员用户,另外一个不同的布局视图文件服务于普通用户。

创建布局视图

  • 右键单击Views文件夹并添加"Shared"文件夹。

  • 右键单击"Shared"文件夹,然后选择"添加" - "新建项"

  • 在"添加新项"窗口中搜索布局,一般在 web 下的 ASP.NET

  • 选择"Razor 布局"并单击"添加"按钮

  • 名为_Layout.cshtml 的文件将添加到"Shared"文件夹中

  • _Layout.cshtml 文件中自动生成的 HTML

以下是_Layout.cshtml 中默认生成的 HTML 。

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

请注意,标准htmlheadtitlebody元素位于此布局视图文件中。由于我们现在将它们放在布局视图文件中,因此我们不必在每个视图中重复所有这些 HTML。

目前,我们没有导航菜单。我们将在即将推出的视频中将其包含在布局视图中。

使用@ViewBag.Title表达式查看特定标题。 例如,当使用此布局视图呈现"index.cshtml"视图时,index.cshtml 将在 ViewBag 上设置 Title 属性。

然后,使用表达式@ViewBag.Title 通过布局视图检索它,并将其设置为<title>标记的值。

ViewBag 不提供智能提示和编译时错误检查。因此,使用它将大量数据从普通 Razor 视图传递到布局视图并不是很好,但是传递像 PageTitle 这样非常小的东西,ViewBag 就很合适了。

@RenderBody()是注入视图特定内容的位置。例如,如果使用此布局视图呈现 index.chtml 视图,则会在我们 调用@RenderBody()方法 的位置注入 index.cshtml 视图内容 。

使用布局视图

要使用布局视图(\_Layout.cshtml)渲染视图,需设置 Layout 属性。例如,要将布局视图与 details.cshtml 一起使用,需要修改 details.cshtml 中的代码以包含 Layout 属性,如下所示。

@model StudentManagement.ViewModels.HomeDetailsViewModel @{ Layout =
"~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "Student Details"; }
<h3>@Model.PageTitle</h3>
<div>
  姓名 : @Model.Student.Name
</div>
<div>
  邮箱 : @Model.Student.Email
</div>
<div>
 主修科目 : @Model.Student.Major
</div>

我们有一种更好的方法来设置 Layout 属性,而不是在每个视图中设置它。 我们将在即将发布的视频中讨论这个问题

文章说明

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

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

公众号:角落的白板报