无涯教程-ASP.NET Core - Razor布局在本章中，无涯教程将了解“Razor Layout”视图，大多数

在本章中，无涯教程将了解“Razor Layout”视图，大多数网站和Web应用程序都希望创建呈现一些常见元素的页面。

布局视图

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

"Layout"视图是扩展名为 *.cshtml 的Razor视图，您可以选择以所需的方式命名布局视图，在本章中，将使用名为 _Layout.cshtml 。
这是"Layout"视图的通用名称，不需要前导下划线，这只是许多开发人员遵循的约定；
这是一种特殊的视图，但是一旦有了"Layout"视图，就可以设置控制器视图，例如主页的"Index"视图。

可以将该视图设置为在"Layout"视图内的特定位置进行渲染。
"Index"视图仅需要呈现控制器方法提供的该模型的特定内容，而"Layout"视图则负责其他所有内容。

举一个简单的例子。

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

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

右键单击Shared文件夹，然后选择Add→New Item。

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

无涯教程希望"Layout"视图负责管理head和body。现在，由于此视图位于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>
  </span><span class="tag">&lt;div&gt;</span><span class="pln"> 
    @RenderBody() 
  </span><span class="tag">&lt;/div&gt;</span><span class="pln"> 
  

</body>
</html>

在上面的代码中，您将看到类似 RenderBody 和 ViewBag.Title 的表达式，当MVC控制器操作呈现"Index"视图时，会涉及到一个布局页面，然后将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>
  </span><span class="str">&lt;table&gt;</span><span class="pln"> 
     </span><span class="lit">@foreach</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> employee </span><span class="kwd">in</span><span class="pln"> </span><span class="typ">Model</span><span class="pun">.</span><span class="typ">Employees</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> 
        </span><span class="str">&lt;tr&gt;</span><span class="pln"> 
           </span><span class="str">&lt;td&gt;</span><span class="pln"> 
              </span><span class="lit">@Html</span><span class="pun">.</span><span class="typ">ActionLink</span><span class="pun">(</span><span class="pln">employee</span><span class="pun">.</span><span class="typ">Id</span><span class="pun">.</span><span class="typ">ToString</span><span class="pun">(),</span><span class="pln"> </span><span class="str">"Details"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> 
                 </span><span class="pun">{</span><span class="pln"> id </span><span class="pun">=</span><span class="pln"> employee</span><span class="pun">.</span><span class="typ">Id</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> 
           </span><span class="pun">&lt;/</span><span class="pln">td</span><span class="pun">&gt;</span><span class="pln"> 
           </span><span class="str">&lt;td&gt;</span><span class="lit">@employee</span><span class="pun">.</span><span class="typ">Name</span><span class="pun">&lt;/</span><span class="pln">td</span><span class="pun">&gt;</span><span class="pln"> 
        </span><span class="pun">&lt;/</span><span class="pln">tr</span><span class="pun">&gt;</span><span class="pln"> 
     </span><span class="pun">}</span><span class="pln"> 
  </span><span class="pun">&lt;/</span><span class="pln">table</span><span class="pun">&gt;</span><span class="pln"> 
  

</body>
</html>

在Index视图中删除不需要的标签，因此，可以删除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中添加一些信息来设置标题，如上面的代码所示。

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

无涯教程-ASP.NET Core - Razor布局

布局视图

参考链接