在本章中,无涯教程将了解“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> <div> @RenderBody() </div> </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> <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标签之类的东西,如以下程序所示。
@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中添加一些信息来设置标题,如上面的代码所示。
保存所有文件并运行应用程序。运行该应用程序后,您将看到以下主页。
参考链接
https://www.learnfk.com/asp.net_core/asp.net-core-razor-layout-views.html
标签:Core,ASP,Layout,Razor,ViewBag,标签,视图,Index,employee From: https://blog.51cto.com/u_14033984/7815814