ASP.NET Core教程

ASP.NET Core - Razor布局视图

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

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

布局视图

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

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

布局视图

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

示例

我们举一个简单的例子.

如果你有多个观点，那么你将看到所有视图将包含一些重复标记.它们都有一个 HTML标记，头标记和正文标记.

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

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

ASP.NET添加新项目

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

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>

在Index视图中删除我们不再需要的标记.因此，我们可以删除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>

我们仍然需要做两件事&减去;