ASP.NET Core中的分部视图

导航：

• ASP.NET Core 6 RazorPages与EF Core入门视频目录
• 视频课程更佳：ASP.NET Core 6 RazorPages与EF Core入门视频

在本视频中，我们将讨论ASP.NET Core中的分部视图。

什么是分部视图

分部视图是 MVC 中一种很实用的技术，它可以在其他视图中进行独立的 HTML 内容。与视图一样，分部视图使用 .cshtml文件扩展名。简单来说它提供了视图之间的内容共享。

• 就像 Razor Pages或MVC视图一样，分部视图也是.cshtml扩展名。
• 分部视图可实现代码复用。
• 封装可在多个 Razor Pages或视图上复用的HTML和C＃代码。

ASP.NET Core分部视图示例

请看下面的学生列表（/Students/Index） Razor Pages。

学生列表 Razor Pages路径(/Students/Index)包含的信息如下：

• 遍历学生列表的代码
• 显示学生姓名，照片和3个按钮的代码
• 查看，编辑和删除。

@page  "/Students"
@model StudentManagement.RazorPage.Pages.Students.IndexModel
@{
    ViewData["Title"] = "Index";
}

<style>
    .btn {
        width: 75px;
    }
</style>

<h1>学生</h1>

<div class="card-deck">
    @foreach (var student in Model.Students)
    {
        var photoPath = "~/images/" + (student.PhotoPath ?? "noimage.png");
        <div class="card m-3" style="min-width: 18rem; max-width:30.5%;">
            <div class="card-header">
                <h3>@student.Name</h3>
            </div>

            <img class="card-img-top imageThumbnail" src="@photoPath"
                 asp-append-version="true" />

            <div class="card-footer text-center">
                <a asp-page="/Students/Details" asp-route-ID="@student.Id" class="btn btn-primary m-1">详情</a>
                <a  asp-page="/Students/Edit"  asp-route-ID="@student.Id" class="btn btn-primary m-1">编辑</a>
                <a asp-page="/Students/Delete"  asp-route-ID="@student.Id" class="btn btn-danger m-1">删除</a>
            </div>
        </div>
    }
</div>

现在，请考虑以下删除 Razor 页面（/ Students / Delete）

请注意，即使在此页面上，用于显示学生姓名和照片的代码也是重复的。

@page "{id}"
@model DeleteModel
@{
    ViewData["Title"] = "删除";
   var photoPath = "~/images/" + (Model.Student.PhotoPath ?? "noimage.png");
}
<h1>确认删除</h1>
<div class="alert alert-danger">
  <div class="card m-3" style="min-width: 18rem; max-width:30.5%;">
        <div class="card-header">
            <h3>@Model.Student.Name</h3>
        </div>
        <img class="card-img-top imageThumbnail" src="@photoPath"
             asp-append-version="true" />
    </div>
    <h5>确实要删除学生 - @Model.Student.Name  信息吗？</h5>
    <form method="post">
        <button type="submit" class="btn btn-danger">确认</button>
        <a asp-page="/Students/Index" class="btn btn-primary">取消</a>
    </form>
</div> 
 

使用分部视图复用代码

在大部分场景中，代码重复是不好的行为。显示学生姓名，照片和三个按钮（查看，编辑和删除）的代码可以封装到分部视图中。

然后，即使在布局页面中，也可以在任意数量的页面上复用此分部视图。

分部视图命名约定

分部视图文件名通常以下划线（_）开头。这是一个命名约定。只需查看名称中的下划线，就可以轻松地说这是分部视图，而不是常规的 Razor视图或页面。

我们将分部视图命名为_DisplayStudentPartial.cshtml

分部视图发现

如果分部视图位于Pages文件夹中的特定文件夹中，则只有该特定文件夹中的视图或页面可以使用分部视图。

如果要使用页面的分部视图或其他子文件夹的视图，请将其放置在Shared文件夹中。

@model Student
@{
    var photoPath = "~/images/" + (Model.PhotoPath ?? "noimage.png");
  //`查看`、`编辑`和`删除`按钮不能显示在`删除RazorPage`页面上。
//它们应该只显示在Student List  Razor Pages上，这些页面将使用ViewData字典传递true或false
    bool showButtons = (bool)ViewData["ShowButtons"];
}

<div class="card m-3" style="min-width: 18rem; max-width:30.5%;">
    <div class="card-header">
        <h3>@Model.Name</h3>
    </div>

    <img class="card-img-top imageThumbnail" src="@photoPath"
         asp-append-version="true" />

    @if (showButtons)
    {
        <div class="card-footer text-center">
            <a asp-page="/Students/Details" asp-route-ID="@Model.Id"
               class="btn btn-primary m-1">查看</a>

            <a asp-page="/Students/Edit" asp-route-ID="@Model.Id"
               class="btn btn-primary m-1">编辑</a>

            <a asp-page="/Students/Delete" asp-route-ID="@Model.Id"
               class="btn btn-danger m-1">删除</a>
        </div>
    }
</div>

渲染分部视图

要渲染分部视图，请使用<partial>标记帮助器。使用模型属性传递模型数据。当然也可以传递其他任何数据，在这里我们使用ViewData词典。

@{
    ViewData["ShowButtons"] = true;
}

<partial name="_DisplayStudentPartial" model="student" view-data="ViewData" />

从学生列表 Razor Pages渲染分部视图（/ Students / Index）

完整的Index.cshtml代码

@page   
@model YoYoMooc.StudentManagement.RazorPage.Pages.Students.IndexModel
@{
    ViewData["Title"] = "学生列表";
        //使用ViewData传递true来告诉分部视图显示查看编辑和删除按钮
    ViewData["ShowButtons"] = true;
}

<style>
    .btn {
        width: 75px;
    }
</style>

<h1>学生列表</h1>

<div class="card-deck">
    @foreach (var student in Model.Students)
    {
 
        <partial name="_DisplayStudentPartial" model="student" view-data="ViewData" />

    }
</div>

从删除 Razor Pages渲染分部视图（/ Students / Delete）

@page "{id}"
@model DeleteModel
@{
    ViewData["Title"] = "删除页面";
    //使用ViewData传递false 来告诉分部视图隐藏查看编辑和删除按钮
     ViewData["ShowButtons"] = false;
}
<h1>确认删除</h1>
<div class="alert alert-danger">
         <partial name="_DisplayStudentPartial" model="@Model.Student" view-data="ViewData" />

    <h5>确实要删除学生 - @Model.Student.Name  信息吗？</h5>
    <form method="post">
        <button type="submit" class="btn btn-danger">确认</button>
        <a asp-page="/Students/Index" class="btn btn-primary">取消</a>
    </form>
</div>