ASP.NET Core – Razor布局视图

江小编

6 年前

在这篇文章中，老司机带你了解Razor布局视图。大多数网站和Web应用程序都希望创建呈现一些常见元素的页面。

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

布局视图

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

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

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

例

我们举一个简单的例子。

如果您有多个视图，那么您将看到所有视图都包含一些重复标记。它们都有一个开头的HTML标签，头标签和正文标签。

尽管我们在此应用程序中没有导航菜单，但实际应用程序可能也可用，我们不希望在每个视图中复制该标记。

让我们创建一个Layout视图，我们将Layout视图添加到Views文件夹中名为Shared的新文件夹中。这是MVC框架知道的传统文件夹。它知道这里的视图可能被整个应用程序中的多个控制器使用。让我们右键单击Shared文件夹，然后选择Add→New Item。

在中间窗格中，选择MVC视图布局页面。这里的默认名称是_Layout.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控制器操作呈现索引视图时，它包含一个布局页面; 然后，索引视图及其生成的HTML将放置在“索引”视图中。

这是方法调用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标记之类的内容。我们也不需要打开的body元素或关闭标记，如下面的程序所示。

@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中添加一些信息来设置适当的标题，如上面的代码所示。

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