ASP.NET Core Razor 布局视图

在本章中，我们将了解 Razor 布局视图。大多数网站和 web 应用程序都希望创建呈现一些常见元素的页面。

通常在每个页面上都有一个顶部区域，其中显示徽标和导航菜单。
您还可能有一个带有附加链接和信息的侧边栏，可能在页面底部有一个页脚，其中包含一些内容。
应用程序的每个页面都希望具有这些共性。在这里，我们使用 Layout 视图来避免我们编写的每个页面中的共性重复。

布局视图（View Layout）

现在让我们了解什么是布局视图。

Layout 视图是带有 *.cshtml 扩展名的 Razor 视图。您可以选择以所需的方式命名布局视图。在本章中，我们将使用名为 _Layout.cshtml 的 Layout 视图。
这是 Layout 视图的常用名称，不需要前导下划线。这只是许多开发人员遵循的一个惯例，以识别不是视图的视图；您可以将其渲染为控制器操作的视图结果。
这是一种特殊的视图，但是一旦我们有了 Layout 视图，我们就可以设置控制器视图，比如主页的 Index 视图。

我们可以将此视图设置为在 Layout 视图中的特定位置进行渲染。
这种布局视图方法意味着 Index.chtml 不需要知道任何有关徽标或顶级导航的信息。
索引视图（Index View）只需要为控制器操作提供的模型呈现特定内容，而 布局视图 负责其他所有内容。

实例

让我们举一个简单的例子。

如果您有多个视图，那么您将看到所有视图都将包含一定数量的重复标记。它们都将有一个打开的 HTML 标记、一个 head 标记和一个 body 标记。

尽管我们在这个应用程序中没有导航菜单，但在真正的应用程序中，它可能也是可用的，我们不想在每个视图中复制该标记。

让我们创建一个布局视图，然后将布局视图添加到 Views 文件夹中名为 Shared 的新文件夹中。这是 MVC 框架知道的常规文件夹。它知道这里的视图可能被应用程序中的多个控制器使用。让我们右键单击共享文件夹并选择 添加→ 新建项。

在中间窗格中，选择 MVC 视图布局页面。这里的默认名称是 _Layout.cshtml。根据用户选择要在运行时使用的布局视图。现在，单击添加按钮。这是默认情况下新布局视图将获得的内容。

我们希望 Layout 视图负责管理 head 和 body 部分。现在，由于此视图是 Razor 视图，我们可以使用 C# 代码。我们仍然可以添加文本。现在我们有一个显示 DateTime.Now 的 div。现在我们只添加 Year。

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

在上面的代码中，您将看到类似 RenderBody 和 ViewBag.Title 的表达式。当 MVC 控制器操作呈现 Index 视图时，会涉及到一个布局页面；则索引视图及其生成的 HTML 将被放置在索引视图中。

这是对 RenderBody 的方法调用所在。我们可以期望整个应用程序中的所有内容视图都出现在调用 RenderBody 的 div 中。

现在让我们转到 index.cshtml 文件。

@model MyFirstCoreWebApp.Controllers.HomePageViewModel
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Home</title>
   </head>
   <body>
      <h1>Welcome!</h1>
      <table>
         @foreach (var employee in Model.Employees) {
            <tr>
               <td>
                   @Html.ActionLink(employee.ID.ToString(), "Details", new { id = employee.ID })
               </td>
               <td>@employee.EmployeeName</td>
            </tr>
         }
      </table>
   </body>
</html>

删除索引视图中不再需要的标记。因此，我们可以删除 HTML 标记和 head 标记。我们也不需要打开 body 元素或结束标记，如以下程序所示。

@model MyFirstCoreWebApp.Controllers.HomePageViewModel
@{
   ViewBag.Title = "Home";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Welcome!</h1>
<table>
   @foreach (var employee in Model.Employees) {
      <tr>
         <td>
            @Html.ActionLink(employee.ID.ToString(), "Details", new { id = employee.ID })
         </td>
         <td>@employee.EmployeeName</td>
      </tr>
   }
</table>

我们仍然需要做两件事：

首先，我们需要告诉 MVC 框架，我们希望从这个视图中使用 Layout 视图。
第二，我们需要通过向 ViewBag 中添加一些信息来设置适当的标题，如上面的代码所示。

让我们保存所有文件并运行应用程序。结果如下：

ASP.NET Core Razor 布局视图

布局视图（View Layout）

实例

分类导航