在 ASP.NET Web Pages 中，布局是一种将页面分成多个部分以便更好地组织和管理页面内容的技术。ASP.NET Web Pages 使用 @RenderSection 和 @RenderBody 等语法来定义和渲染布局。以下是 ASP.NET Web Pages 中布局的基本概念和用法：

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.pingtaimeng.com/article/detail/14685/ASP.NET