当前位置：首页 > article >正文

asp.net core mvc中的模板页（父页面，布局页）和部分视图（Partial View）

article 2025/1/8 17:02:12

模板页（父页面，布局页）

在 ASP.NET Core MVC 中，模板页（_Layout 文件）用于定义页面的共享布局和结构，通常包含网站的头部、导航栏、页脚等，所有的具体页面（视图）都可以继承并复用这些布局。

父页面（通常是布局页面 _Layout.cshtml）在 ASP.NET Core MVC 中扮演着类似于模板的角色。它允许你定义一个通用的 HTML 结构，子页面（视图）可以通过 @RenderBody() 插入自己的内容。具体来说，_Layout.cshtml 是父页面，而具体的视图（如 Index.cshtml）则是子页面。

如何在 ASP.NET Core MVC 中设置模板页（父页面）

1. 创建 `_Layout.cshtml`（模板页）

在 Views/Shared/ 目录下创建 _Layout.cshtml 文件（如果没有的话）。这个文件通常包含网站的导航栏、头部、页脚等公共部分，使用 @RenderBody() 占位符来指示子页面内容的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"] - My ASP.NET Core Application</title>
    <link rel="stylesheet" href="~/css/site.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/About">About</a></li>
                <li><a href="/Contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        @RenderBody()  <!-- 这里插入子页面的内容 -->
    </main>

    <footer>
        <p>&copy; 2025 My Application</p>
    </footer>
</body>
</html>

2. 在视图中引用布局页（父页面）

在具体的视图页面（例如 Index.cshtml 或 About.cshtml）中，使用 @{ Layout = "_Layout"; } 来指定使用哪个布局页（父页面）。这告诉 ASP.NET Core MVC 该视图将继承 _Layout.cshtml 的结构。

@{
    ViewData["Title"] = "Home Page";
    Layout = "_Layout";  <!-- 指定使用的布局页 -->
}

<h1>Welcome to the Home Page!</h1>
<p>This is the home page content.</p>

3. `@RenderBody()` 和 `@RenderSection()`

@RenderBody()：是一个占位符，指示内容（视图的主体）应该渲染的位置。子视图的内容将被插入到这里。
@RenderSection()：用于定义在布局页中的可选区域。子页面可以使用 @Section 来提供特定部分的内容。例如，在布局中可以有一个 @RenderSection("scripts", required: false)，并且子页面可以选择提供 scripts 区域的内容。

示例：

_Layout.cshtml

<head>
    <!-- 其他头部内容 -->
    @RenderSection("head", false)  <!-- 可选部分 -->
</head>
<body>
    <header>
        <!-- 导航栏等 -->
    </header>
    <main>
        @RenderBody()
    </main>
    @RenderSection("scripts", false)  <!-- 可选部分，通常是脚本 -->
</body>

Index.cshtml

@{
    ViewData["Title"] = "Home Page";
    Layout = "_Layout";
}

<h1>Welcome to the Home Page!</h1>
<p>This is the content of the home page.</p>

@section scripts {
    <script src="~/js/home.js"></script>
}

在这个例子中，Index.cshtml 提供了 scripts 部分的内容，这部分内容会被插入到布局页 _Layout.cshtml 中 @RenderSection("scripts") 的位置。

4. 全局配置布局页（父页面）

你也可以通过全局配置设置默认的布局页，这样所有的视图默认会使用同一个布局页，而不需要在每个视图中都指定 Layout。

在 Views/_ViewStart.cshtml 文件中，可以设置默认的布局页：

@{
    Layout = "_Layout";
}

这样，所有没有显式指定 Layout 的视图都会使用 _Layout.cshtml 作为布局页。

小结

父页面 通常是 _Layout.cshtml，它定义了整个网站的框架（头部、导航、页脚等）。
子页面（视图）通过 @RenderBody() 插入自己的内容。
可以在 @RenderSection() 中定义可选区域，允许子页面提供额外内容（如 JavaScript）。
可以通过 _ViewStart.cshtml 全局配置默认的布局页。

使用这种方式，能够让你轻松地共享布局，并保持各个页面的结构一致。

部分视图（Partial View）

在 ASP.NET Core MVC 中，除了使用完整的布局页（如 _Layout.cshtml）外，还可以使用 部分视图（Partial View） 来实现更细粒度的封装和复用。部分视图通常用于封装页面中的某些特定部分（如表单、导航栏、评论列表等），这些部分视图可以被多个页面复用。

部分视图（Partial View）概述

部分视图是可以嵌入到其他视图中的子视图，它允许你封装页面的一部分内容，并在不同的视图中重复使用。这种封装方式比完整的布局页面（Layout）更局部，可以是一个页面的某个小部分，而不是整个页面的结构。

部分视图的使用方式

创建部分视图
部分视图通常存放在 Views/Shared/ 目录下，命名规则为 _PartialName.cshtml。命名约定中的下划线是为了区分普通视图和部分视图（尽管并非强制要求，但通常是这么做的）。

例如，你可以创建一个名为 _Header.cshtml 的部分视图，它包含了页面的头部内容。
```

<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/About">About</a></li>
            <li><a href="/Contact">Contact</a></li>
        </ul>
    </nav>
</header>
```
在其他视图中使用部分视图
使用 @Html.Partial() 或 @await Html.PartialAsync() 来嵌入部分视图。@Html.Partial() 是同步的，而 @await Html.PartialAsync() 是异步的，适合在进行 I/O 操作时使用。
```
@* 在视图中使用部分视图 *@
@Html.Partial("_Header")
```
或者，使用异步方法：
```
@await Html.PartialAsync("_Header")
```
这种方式会将 _Header.cshtml 的内容嵌入到当前页面中的指定位置。

传递模型数据到部分视图
你可以向部分视图传递模型数据，方法是通过 @Html.Partial() 或 @Html.PartialAsync() 的第二个参数传递数据。

例如，假设你有一个模型 NavigationModel，它包含了导航栏的相关信息：

public class NavigationModel
{
    public List<string> MenuItems { get; set; }
}

你可以在控制器中传递这个模型到视图，然后在部分视图中使用它：

public IActionResult Index()
{
    var model = new NavigationModel
    {
        MenuItems = new List<string> { "Home", "About", "Contact" }
    };
    return View(model);
}

然后，在视图中将模型传递给部分视图：

@Html.Partial("_Header", Model.NavigationModel)

在部分视图 _Header.cshtml 中，你可以像使用普通模型一样使用它：

<header>
    <nav>
        <ul>
            @foreach (var item in Model.MenuItems)
            {
                <li><a href="#">@item</a></li>
            }
        </ul>
    </nav>
</header>

使用局部视图（Partial View）作为组件
部分视图不仅限于简单的布局片段，它们还可以作为“组件”来封装可复用的逻辑和 UI 组件。例如，你可以创建一个包含评论列表的部分视图，将其嵌入到多个页面中，展示评论内容。
```

<div class="comments">
    <ul>
        @foreach (var comment in Model.Comments)
        {
            <li>@comment.Text</li>
        }
    </ul>
</div>
```
然后在不同的视图中复用这个部分视图：
```
@Html.Partial("_Comments", Model.Comments)
```