在这篇文章中，老司机带你了解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中添加一些信息来设置适当的标题，如上面的代码所示。
让我们保存所有文件并运行应用程序。运行应用程序后，您将看到以下主页。
本文转载自tutorialspoint.com，原文链接：https://www.tutorialspoint.com/asp.net_core/asp.net_core_razor_layout_views.htm，本文观点不代表江湖人士立场，转载请联系原作者。
