视图 (View) 经常共享视觉元素和编程元素。在本篇文章中,你将学习如何在你的 ASP.NET 应用程序中使用通用布局视图、共享指令以及在渲染视图前运行通用代码。
章节:
大部分 web 应用程序在用户切换页面时,使用通用布局提供了一致的用户体验。通用布局通常包含页眉、导航栏(或菜单)以及页脚等通用 UI 元素。
在一个应用程序中,诸如脚本 (scripts) 和样式表 (stylesheets) 这样的通用 html 结构也频繁的被许多页面使用。所有的这些共享元素可以在 layout 文件中定义,这样应用程序中的任何视图都可以使用它们。布局视图减少了视图中的重复代码,帮助我们遵循 。
按照惯例,ASP.NET 应用程序的默认布局文件命名为
。Visual Studio ASP.NET Core MVC 项目模板包含这个布局文件,位置在
- _Layout.cshtml
文件夹:
- Views/Shared
这个布局为应用程序中的视图定义了一个顶层模版。布局对应用程序来说不是必须的,应用程序也可以定义多个模板供不同的视图使用。
一个
例子:
- _Layout.cshtml
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0"
- />
- <title>
- @ViewData["Title"] - WebApplication1
- </title>
- <environment names="Development">
- <link rel="stylesheet" />
- <link rel="stylesheet" />
- </environment>
- <environment names="Staging,Production">
- <link rel="stylesheet" asp-fallback-href="~/lib/bootstrap/dist/CSS/bootstrap.min.css"
- asp-fallback-test-class="sr-only" asp-fallback-test-property="position"
- asp-fallback-test-value="absolute" />
- <link rel="stylesheet" asp-append-version="true" />
- </environment>
- </head>
- <body>
- <div class="navbar navbar-inverse navbar-fixed-top">
- <div class="container">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
- <span class="sr-only">
- Toggle navigation
- </span>
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- <span class="icon-bar">
- </span>
- </button>
- asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1
- </a>
- </div>
- <div class="navbar-collapse collapse">
- <ul class="nav navbar-nav">
- asp-area="" asp-controller="Home" asp-action="Index">Home
- </a>
- </li>
- asp-area="" asp-controller="Home" asp-action="About">About
- </a>
- </li>
- asp-area="" asp-controller="Home" asp-action="Contact">Contact
- </a>
- </li>
- </ul>
- @await Html.PartialAsync("_LoginPartial")
- </div>
- </div>
- </div>
- <div class="container body-content">
- @RenderBody()
- <hr />
- <footer>
- <p>
- © 2016 - WebApplication1
- </p>
- </footer>
- </div>
- <environment names="Development">
- <script src="~/lib/jquery/dist/jquery.js">
- </script>
- <script src="~/lib/bootstrap/dist/js/bootstrap.js">
- </script>
- <script src="~/js/site.js" asp-append-version="true">
- </script>
- </environment>
- <environment names="Staging,Production">
- <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
- asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery">
- </script>
- <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
- asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
- </script>
- <script src="~/js/site.min.js" asp-append-version="true">
- </script>
- </environment>
- @RenderSection("scripts", required: false)
- </body>
来源: http://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-4_3_3-layout.html