1. 首页
  2. IT江湖

ASP.NET Core – Razor布局视图

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

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

布局视图

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

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

布局视图

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

我们举一个简单的例子。

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

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

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

ASP.NET添加新项

在中间窗格中,选择MVC视图布局页面。这里的默认名称是_Layout.cshtml。选择要在运行时使用的布局视图,具体取决于用户。现在,单击“添加”按钮。这是默认情况下您的新布局视图。

布局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>

在上面的代码,你会看到这样的表达式RenderBodyViewBag.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,经授权后发布,本文观点不代表江湖人士立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

QQ:1768281975

在线咨询:点击这里给我发消息

电子邮件:[email protected]

QR code