1. 创建布局页:
- 布局页是包含页面的共同结构和样式的文件。可以使用 _PageStart.cshtml 或其他文件作为布局页。
- 在布局页中，使用 @RenderBody 来指示页面的主要内容应该被渲染的位置。
<!-- _Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
<!-- 其他头部内容 -->
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<div id="content">
@RenderBody()
</div>
<footer>
<p>Copyright © 2023 My Website</p>
</footer>
</body>
</html>
2. 创建页面:
- 创建需要布局的页面，使用 @{Layout = "_Layout.cshtml";} 指定页面要使用的布局。
<!-- Page1.cshtml -->
@{
Layout = "_Layout.cshtml";
Page.Title = "Page 1";
}
<h2>Page 1 Content</h2>
<p>This is the content of Page 1.</p>
<!-- Page2.cshtml -->
@{
Layout = "_Layout.cshtml";
Page.Title = "Page 2";
}
<h2>Page 2 Content</h2>
<p>This is the content of Page 2.</p>
3. @RenderSection 指令:
- 使用 @RenderSection 在布局页中定义和渲染命名的部分。
<!-- _Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
<!-- 其他头部内容 -->
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<div id="content">
@RenderBody()
</div>
<footer>
<p>Copyright © 2023 My Website</p>
@RenderSection("Footer", required: false)
</footer>
</body>
</html>
4. 在页面中定义部分内容:
- 在页面中，使用 @section 来定义部分的内容。
<!-- Page1.cshtml -->
@{
Layout = "_Layout.cshtml";
Page.Title = "Page 1";
}
@section Footer {
<p>Additional content for Page 1 footer.</p>
}
<h2>Page 1 Content</h2>
<p>This is the content of Page 1.</p>
5. 多个部分:
- 页面和布局可以包含多个命名的部分，从而更灵活地组织内容。
<!-- _Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
<!-- 其他头部内容 -->
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<div id="content">
@RenderSection("MainContent", required: false)
</div>
<footer>
@RenderSection("Footer", required: false)
</footer>
</body>
</html>
<!-- Page1.cshtml -->
@{
Layout = "_Layout.cshtml";
Page.Title = "Page 1";
}
@section MainContent {
<h2>Page 1 Content</h2>
<p>This is the content of Page 1.</p>
}
@section Footer {
<p>Additional content for Page 1 footer.</p>
}
注意事项：
- @RenderBody 用于呈现页面的主体内容，而 @RenderSection 用于呈现页面中定义的命名部分的内容。
- 使用 @{Layout = "_Layout.cshtml";} 来指定页面要使用的布局。
- 部分内容可以是任意 HTML、文本或代码。
布局使得在 ASP.NET Web Pages 中可以更好地组织和重用页面结构，同时保持页面内容的灵活性。通过定义和渲染多个命名的部分，可以轻松地定制不同页面的布局。
转载请注明出处：http://www.zyzy.cn/article/detail/14685/ASP.NET