ASP.NET Core - Razor 布局视图

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

  • 通常，每个页面上都有一个顶部区域，用于显示徽标和导航菜单。

  • 您可能还会有一个带有附加链接和信息的侧边栏，并且可能在页面底部有一个包含一些内容的页脚。

  • 应用程序的每个页面都希望具有这些共同因素。在这里，我们利用布局视图来避免我们编写的每个页面中出现重复的因素。

布局视图

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

  • 布局视图是带有*.cshtml扩展名的 Razor 视图。您可以选择按照您想要的方式命名布局视图。在本章中，我们将使用名为_Layout.cshtml的布局视图。

  • 这是布局视图的通用名称，不需要前导下划线。这只是许多开发人员遵循的约定，用于识别不是视图的视图；您将其呈现为控制器操作的视图结果。

  • 这是一种特殊的视图，但是一旦我们有了布局视图，我们就可以设置控制器视图，例如主页的索引视图。

布局视图

  • 我们可以设置此视图以在布局视图内的特定位置进行渲染。

  • 这种布局视图方法意味着 Index.cshtml 不需要了解有关徽标或顶级导航的任何信息。

  • Index 视图只需要渲染控制器操作为该视图提供的模型的特定内容，而 Layout 视图则负责处理其他所有事情。

例子

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

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

即使我们在此应用程序中没有导航菜单，但在实际应用程序中它也可能可用，并且我们不想在每个视图中重复该标记。

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

ASP.NET 添加新项目

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

布局Cshtml

我们希望布局视图负责管理头部和身体。现在，由于该视图位于 Razor 视图中，我们可以使用 C# 表达式。我们仍然可以添加文字。我们现在有一个显示 DateTime.Now 的 div。现在让我们添加年份。

<!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 将被放置在 Index 视图中。

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

该文件中的另一个表达式是 ViewBag.Title。ViewBag 是一种数据结构，可以将任何属性和任何您想要添加到 ViewBag 中的数据添加到其中。我们可以在 ViewBag 上添加 ViewBag.Title、ViewBag.CurrentDate 或任何我们想要的属性。

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

@model FirstAppDemo.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.Name</td> 
            </tr> 
         } 
      </table> 
      
   </body> 
</html>

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

@model FirstAppDemo.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.Name</td> 
      </tr> 
   } 
</table>

我们还需要做两件事 -

  • 首先，我们需要告诉MVC框架我们要从这个视图中使用Layout视图。

  • 其次，我们需要通过向 ViewBag 添加一些信息来设置适当的标题，如上面的代码所示。

让我们保存所有文件并运行应用程序。运行该应用程序后，您将看到以下主页。

主页