Asp.Net Core-Layout布局视图

最新推荐文章于 2024-08-09 08:00:00 发布

终南山守门人

最新推荐文章于 2024-08-09 08:00:00 发布

阅读量3.6k

点赞数

在本章中，我们将了解Razor布局视图。大多数网站和Web应用程序都希望将一些页面所共有的元素放在一个公共的页面上，减少维护成本。

您通常在每个页面上都有一个顶部区域，您可以在其中显示logo和导航菜单。
您还可能有一个侧边栏，其中包含额外的链接和信息，并且可能在页面底部有一些页脚，其中包含一些内容。
应用程序的每一页都想要有这些共同的因素。在这里，我们使用布局视图，以避免在我们写的每一个页面上都有重复的元素。

Layout View

让我们现在来了解一个布局视图是什么：

布局视图是具有* .cshtml扩展名的Razor视图。您可以选择以所需的方式命名布局视图。在本章中，我们将使用名称为_Layout.cshtml的布局视图。
这是布局视图的通用名称，并且不需要前导下划线。这只是一个约定，许多开发人员遵循此约定来识别一个视图不是一个布局视图。
这是一种特殊的视图，但是一旦我们有一个布局视图，我们就可以用来设置我们的控制器视图，如主页的Index视图。
我们可以将此视图设置为在布局视图内在特定位置显示。
这种布局视图方法意味着Index.cshtml不需要知道任何关于logo或顶级导航的信息。
Index视图只需要渲染控制器传给视图的模型的特定内容，布局视图负责处理其他所有内容。

Layout 案例

让我们举一个简单的例子。

如果您有多个视图，您发现所有视图包含一些重复的标签。他们都有一个开放的

即使我们在这个应用程序没有导航菜单，但是在一个真正的应用程序中，它可能也可用，我们不想在每个视图中复制该标签。

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

在中间窗格中，选择MVC视图布局页面。这里的默认名称是_Layout.cshtml。根据用户选择要在运行时使用的布局视图。现在，点击添加按钮。这就是在默认情况下为你生成的新布局视图。

我们希望布局视图负责管理Header和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控制器Action渲染一个使用了Layout视图的Index视图，Index视图和Layout生成的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标签。我们可以删除不需要的body元素或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框架，我们在这个视图中要使用布局视图。
第二，我们需要通过向ViewBag中添加一些信息来设置相应的标题，如上面的代码所示。

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

版权声明：本站所有教程均为本站原创或翻译，转载请注明出处，请尊重他人劳动果实。请记住本站地址：www.yuanjiaocheng.net (猿教程) 作者：卿文刚
本文标题： Asp.Net Core-Layout布局视图
本文地址：http://www.yuanjiaocheng.net/ASPNET-CORE/core-razor-layout.html