📅 最后修改于: 2023-12-03 15:38:21.582000 🧑 作者: Mango
MVC 是一种经典的软件设计模式，它将一个应用程序分成三个主要的组件：模型、视图和控制器。视图是用户界面的部分，它通常是 HTML、CSS 和 JavaScript 组成的页面。在 MVC 中，视图与控制器紧密联系在一起，因为控制器负责调用适当的视图来呈现给用户。
在本文中，我们将探讨如何在 ASP.NET MVC 应用程序中更改视图的布局。我们将说明如何使用 Razor 和布局文件来创建一致的用户界面。
要创建布局文件，请在 ASP.NET MVC 应用程序中的“Views/Shared”文件夹中创建新的 Razor 视图文件。命名此文件 "_Layout.cshtml"，这里的下划线是必需的，因为它将告诉 Razor 引擎不要将此文件作为独立的视图呈现。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewData["Title"] - My ASP.NET Application</title>
@RenderSection("Styles", required: false)
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>
</header>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2021 - My ASP.NET Application</p>
</footer>
</div>
@RenderSection("Scripts", required: false)
</body>
</html>
在此布局文件中，我们定义了一个包含网站标题和菜单的标头，一个包含主要内容的“BodyContent”容器，以及一个脚注。 @RenderBody()占位符表示将呈现从每个页面返回的内容。
要使用布局文件，请在每个要使用布局文件的 Razor 视图的开头添加以下代码：
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
这将告诉 Razor 引擎将此页面的内容放入我们创建的布局文件中。
示例：
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>@ViewData["Title"]</h2>
<p>Use this area to provide additional information.</p>
在此示例中，我们指定了布局文件的位置，并使用 @ViewData 占位符来设置标头的文本。
有时候，我们只需要在某些页面上更改布局的一部分，而不是整个页面。在这种情况下，我们可以使用片段视图来呈现部分视图并将其插入到布局文件中。
例如，我们可以在页面头部插入以下代码来更改网站标题：
@section Header {
<h1>My Custom Title</h1>
}
然后，我们可以在布局文件中使用 @RenderSection() 占位符将这个片段呈现到适当的位置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewData["Title"] - My ASP.NET Application</title>
@RenderSection("Styles", required: false)
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>
@RenderSection("Header", false)
</header>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2021 - My ASP.NET Application</p>
</footer>
</div>
@RenderSection("Scripts", required: false)
</body>
</html>
在此示例中，我们使用 @RenderSection() 占位符将 "Header" 部分视图呈现到布局文件的头部。
在 ASP.NET MVC 应用程序中，我们可以使用布局文件和 Razor 视图引擎来创建一致的用户界面。布局文件是一个通用的模板，可以用于呈现整个网站或部分视图。使用片段视图，我们可以轻松地更改布局的一部分，而无需更改整个布局文件。