第 6 部分，ASP.NET Core 中的 Razor Pages 和 EF Core - 读取相关数据

作者：Tom Dykstra、Jon P Smith 和 Rick Anderson

Contoso University Web 应用演示了如何使用 Razor 和 Visual Studio 创建 EF Core Pages Web 应用。 若要了解系列教程，请参阅第一个教程。

如果遇到无法解决的问题，请下载已完成的应用，然后对比该代码与按教程所创建的代码。

本教程介绍如何读取和显示相关数据。 相关数据是 EF Core 加载到导航属性中的数据。

下图显示了本教程中已完成的页面：

急切加载、显式加载和延迟加载

EF Core 可以通过多种方式将相关数据加载到实体的导航属性中：

• 急切加载。 预先加载是指在查询某一类实体时，同时也会加载相关实体。 读取实体时， EF Core 检索其相关数据。 此方法通常生成一个联接查询，用于检索所需的所有数据。 EF Core 会针对某些类型的预加载执行多个查询。 发布多个查询可能比发布大型的单个查询更为有效。 使用 Include 和 ThenInclude 方法指定预先加载。

  

  当包含集合导航时，预加载会发出多个查询：

  • 一个查询用于主查询
  • 一个查询用于加载树中每个集合“边缘”。

• 使用 Load 分隔查询：您可以在单独的查询中检索数据，并由 EF Core 自动修正导航属性。 “修复”是指 EF Core 自动填充导航属性。 使用 Load 单独查询比预先加载更像是显式加载。

  

  注意：EF Core会自动修正与它之前加载到上下文实例中的任何其他实体之间的导航属性。 即使你没有显式包含某个导航属性的数据，如果之前已加载了部分或所有相关实体，该属性仍可能被填充。

• 显式加载。 首次读取实体时， EF Core 不会检索相关数据。 必须编写代码才能在需要时检索相关数据。 使用单独查询进行显式加载时，会向数据库发送多个查询。 通过显式加载，可以指定要加载的导航属性。 使用 Load 方法进行显式加载。 例如：

  

• 延迟加载。 首次读取实体时， EF Core 不会检索相关数据。 首次访问导航属性时， EF Core 会自动检索该导航属性所需的数据。 EF Core 每次首次访问导航属性时，都会向数据库发送查询。 延迟加载会损害性能，例如当开发人员使用 N+1 查询时。 N+1 查询会加载父项并遍历其子项。

创建课程页面

Course 实体包括一个带相关 Department 实体的导航属性。

若要显示课程的已分配院系的名称，请执行以下操作：

• 将相关的 Department 实体加载到 Course.Department 导航属性。
• 获取 Department 实体的 Name 属性中的名称。

搭建“课程”页的基架

Visualstudio

• 遵循搭建“学生”页的基架中的说明，但以下情况除外：

  • 创建“Pages/Courses”文件夹。
  • 将 Course 用于模型类。
  • 使用现有的上下文类，而不是新建上下文类。

Visual Studio Code

• 创建“Pages/Courses”文件夹。

• 运行以下命令，搭建“课程”页的基架。

  在 Windows 上：

  dotnet aspnet-codegenerator razorpage -m Course -dc SchoolContext -udl -outDir Pages\Courses --referenceScriptLibraries
  

  在 Linux 或 macOS 上：

  dotnet aspnet-codegenerator razorpage -m Course -dc SchoolContext -udl -outDir Pages/Courses --referenceScriptLibraries
  

• 打开 Pages/Courses/Index.cshtml.cs 并检查 OnGetAsync 方法。 脚手架引擎指定对 Department 导航属性进行预先加载。 Include 方法指定预先加载。

• 运行应用并选择“课程”链接。 部门列显示 DepartmentID，这并无用处。

显示院系名称

使用以下代码更新 Pages/Courses/Index.cshtml.cs：

using ContosoUniversity.Models;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace ContosoUniversity.Pages.Courses
{
    public class IndexModel : PageModel
    {
        private readonly ContosoUniversity.Data.SchoolContext _context;

        public IndexModel(ContosoUniversity.Data.SchoolContext context)
        {
            _context = context;
        }

        public IList<Course> Courses { get; set; }

        public async Task OnGetAsync()
        {
            Courses = await _context.Courses
                .Include(c => c.Department)
                .AsNoTracking()
                .ToListAsync();
        }
    }
}

上述代码将 Course 属性更改为 Courses，然后添加 AsNoTracking。

当查询结果用于只读场景时，无跟踪查询非常有用。 它们执行起来通常更快，因为无需设置更改跟踪信息。 如果不需要更新从数据库检索到的实体，则非跟踪查询的性能可能优于跟踪查询。

在某些情况下，跟踪查询比非跟踪查询更高效。 有关详细信息，请参阅跟踪查询与非跟踪查询。 在前面的代码中，由于实体未在当前上下文中更新，因此调用 AsNoTracking。

使用以下代码更新 Pages/Courses/Index.cshtml。

@page
@model ContosoUniversity.Pages.Courses.IndexModel

@{
    ViewData["Title"] = "Courses";
}

<h1>Courses</h1>

<p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Courses[0].CourseID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Courses[0].Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Courses[0].Credits)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Courses[0].Department)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.Courses)
{
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.CourseID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Credits)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Department.Name)
            </td>
            <td>
                <a asp-page="./Edit" asp-route-id="@item.CourseID">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.CourseID">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.CourseID">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

对基架代码进行了以下更改：

• 将 Course 属性名称更改为了 Courses。

• 新增了一个 Number 列，用于显示 属性值。 默认情况下，不针对主键进行架构，因为对最终用户而言，它们通常没有意义。 但是，在这种情况下，这个主键是有意义的。

• 将部门列更改为显示部门名称。 该代码显示加载到 Department 导航属性中的 Department 实体的 Name 属性：

  @Html.DisplayFor(modelItem => item.Department.Name)
  

运行应用并选择“课程”选项卡，查看包含系名称的列表。

使用 Select 加载相关数据

OnGetAsync 方法使用 Include 方法加载相关数据。 Select 方法是只加载所需相关数据的替代方法。 对于单个项（如 Department.Name），它使用 SQL INNER JOIN。 对于集合，它会使用另一种数据库访问方式，而集合上的 Include 运算符也是如此。

以下代码使用 Select 方法加载相关数据：

public IList<CourseViewModel> CourseVM { get; set; }

public async Task OnGetAsync()
{
    CourseVM = await _context.Courses
    .Select(p => new CourseViewModel
    {
        CourseID = p.CourseID,
        Title = p.Title,
        Credits = p.Credits,
        DepartmentName = p.Department.Name
    }).ToListAsync();
}

上述代码不会返回任何实体类型，因此不进行任何跟踪。 有关 EF 跟踪的详细信息，请参阅 跟踪查询与非跟踪查询。

CourseViewModel：

public class CourseViewModel
{
    public int CourseID { get; set; }
    public string Title { get; set; }
    public int Credits { get; set; }
    public string DepartmentName { get; set; }
}

有关完整的 Razor 页面，请参阅 IndexSelectModel。

创建“讲师”页

本节为讲师页面搭建基础结构，并在讲师索引页中添加相关课程和选课记录。

该页面通过以下方式读取和显示相关数据：

• 讲师列表显示来自 OfficeAssignment 实体（上图中所示的 Office）的相关数据。 Instructor 和 OfficeAssignment 实体之间存在一对零或一的关系。 预先加载适用于 OfficeAssignment 实体。 需要显示相关数据时，预先加载通常更高效。 在这种情况下，会显示讲师的办公室分配情况。
• 用户选择一名讲师时，显示相关 Course 实体。 Instructor 和 Course 实体之间存在多对多关系。 对 Course 实体及其相关的 Department 实体使用急切加载。 这种情况下，单独查询可能更有效，因为仅需显示所选讲师的课程。 此示例演示如何对导航属性中的实体的导航属性使用预先加载。
• 用户选择一门课程时，会显示 Enrollments 实体的相关数据。 上图中显示了学生姓名和成绩。 Course 和 Enrollment 实体之间存在一对多的关系。

创建视图模型

“讲师”页显示来自三个不同表格的数据。 需要一个视图模型，该模型中包含表示三个表格的三个属性。

使用以下代码创建 Models/SchoolViewModels/InstructorIndexData.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ContosoUniversity.Models.SchoolViewModels
{
    public class InstructorIndexData
    {
        public IEnumerable<Instructor> Instructors { get; set; }
        public IEnumerable<Course> Courses { get; set; }
        public IEnumerable<Enrollment> Enrollments { get; set; }
    }
}

搭建“讲师”页的基架

Visualstudio

• 按照搭建学生页面框架中的说明操作，但以下例外情况除外：

  • 创建“Pages/Instructors”文件夹。
  • 将 Instructor 用于模型类。
  • 使用现有的上下文类，而不是新建上下文类。

Visual Studio Code

• 创建“Pages/Instructors”文件夹。

• 运行以下命令，搭建“讲师”页的基架。

  在 Windows 上：

  dotnet aspnet-codegenerator razorpage -m Instructor -dc SchoolContext -udl -outDir Pages\Instructors --referenceScriptLibraries
  

  在 Linux 或 macOS 上：

  dotnet aspnet-codegenerator razorpage -m Instructor -dc SchoolContext -udl -outDir Pages/Instructors --referenceScriptLibraries
  

运行应用并导航到“讲师”页。

使用以下代码更新 Pages/Instructors/Index.cshtml.cs：

using ContosoUniversity.Models;
using ContosoUniversity.Models.SchoolViewModels;  // Add VM
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ContosoUniversity.Pages.Instructors
{
    public class IndexModel : PageModel
    {
        private readonly ContosoUniversity.Data.SchoolContext _context;

        public IndexModel(ContosoUniversity.Data.SchoolContext context)
        {
            _context = context;
        }

        public InstructorIndexData InstructorData { get; set; }
        public int InstructorID { get; set; }
        public int CourseID { get; set; }

        public async Task OnGetAsync(int? id, int? courseID)
        {
            InstructorData = new InstructorIndexData();
            InstructorData.Instructors = await _context.Instructors
                .Include(i => i.OfficeAssignment)                 
                .Include(i => i.Courses)
                    .ThenInclude(c => c.Department)
                .OrderBy(i => i.LastName)
                .ToListAsync();

            if (id != null)
            {
                InstructorID = id.Value;
                Instructor instructor = InstructorData.Instructors
                    .Where(i => i.ID == id.Value).Single();
                InstructorData.Courses = instructor.Courses;
            }

            if (courseID != null)
            {
                CourseID = courseID.Value;
                IEnumerable<Enrollment> Enrollments = await _context.Enrollments
                    .Where(x => x.CourseID == CourseID)                    
                    .Include(i=>i.Student)
                    .ToListAsync();                 
                InstructorData.Enrollments = Enrollments;
            }
        }
    }
}

OnGetAsync 方法接受用于所选讲师 ID 的可选路由数据。

检查 Pages/Instructors/Index.cshtml.cs 文件中的查询：

InstructorData = new InstructorIndexData();
InstructorData.Instructors = await _context.Instructors
    .Include(i => i.OfficeAssignment)                 
    .Include(i => i.Courses)
        .ThenInclude(c => c.Department)
    .OrderBy(i => i.LastName)
    .ToListAsync();

代码指定对以下导航属性进行预先加载：

• Instructor.OfficeAssignment
• Instructor.Courses
  • Course.Department

选择讲师时（即 id != null），将执行以下代码。

if (id != null)
{
    InstructorID = id.Value;
    Instructor instructor = InstructorData.Instructors
        .Where(i => i.ID == id.Value).Single();
    InstructorData.Courses = instructor.Courses;
}

从视图模型中的讲师列表检索所选讲师。 视图模型的 Courses 属性会加载来自所选讲师的 Courses 导航属性中的 Course 实体。

Where 方法返回一个集合。 在这种情况下，筛选器会选择单个实体，因此 Single 调用该方法将集合转换为单个 Instructor 实体。 Instructor 实体提供对 Course 导航属性的访问。

当集合中仅有一个元素时，可对该集合使用 Single 方法。 如果集合为空或包含多个项，Single 方法会引发异常。 还可使用 SingleOrDefault，该方式在集合为空时返回默认值。 对于此查询，默认返回 null。

以下代码会在选中课程时为视图模型的 Enrollments 属性赋值：

if (courseID != null)
{
    CourseID = courseID.Value;
    IEnumerable<Enrollment> Enrollments = await _context.Enrollments
        .Where(x => x.CourseID == CourseID)                    
        .Include(i=>i.Student)
        .ToListAsync();                 
    InstructorData.Enrollments = Enrollments;
}

更新“讲师索引”页

使用以下代码更新 Pages/Instructors/Index.cshtml。

@page "{id:int?}"
@model ContosoUniversity.Pages.Instructors.IndexModel

@{
    ViewData["Title"] = "Instructors";
}

<h2>Instructors</h2>

<p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>Hire Date</th>
            <th>Office</th>
            <th>Courses</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.InstructorData.Instructors)
        {
            string selectedRow = "";
            if (item.ID == Model.InstructorID)
            {
                selectedRow = "table-success";
            }
            <tr class="@selectedRow">
                <td>
                    @Html.DisplayFor(modelItem => item.LastName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FirstMidName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.HireDate)
                </td>
                <td>
                    @if (item.OfficeAssignment != null)
                    {
                        @item.OfficeAssignment.Location
                    }
                </td>
                <td>
                    @{
                        foreach (var course in item.Courses)
                        {
                            @course.CourseID @:  @course.Title <br />
                        }
                    }
                </td>
                <td>
                    <a asp-page="./Index" asp-route-id="@item.ID">Select</a> |
                    <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                    <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
                    <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

@if (Model.InstructorData.Courses != null)
{
    <h3>Courses Taught by Selected Instructor</h3>
    <table class="table">
        <tr>
            <th></th>
            <th>Number</th>
            <th>Title</th>
            <th>Department</th>
        </tr>

        @foreach (var item in Model.InstructorData.Courses)
        {
            string selectedRow = "";
            if (item.CourseID == Model.CourseID)
            {
                selectedRow = "table-success";
            }
            <tr class="@selectedRow">
                <td>
                    <a asp-page="./Index" asp-route-courseID="@item.CourseID">Select</a>
                </td>
                <td>
                    @item.CourseID
                </td>
                <td>
                    @item.Title
                </td>
                <td>
                    @item.Department.Name
                </td>
            </tr>
        }

    </table>
}

@if (Model.InstructorData.Enrollments != null)
{
    <h3>
        Students Enrolled in Selected Course
    </h3>
    <table class="table">
        <tr>
            <th>Name</th>
            <th>Grade</th>
        </tr>
        @foreach (var item in Model.InstructorData.Enrollments)
        {
            <tr>
                <td>
                    @item.Student.FullName
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Grade)
                </td>
            </tr>
        }
    </table>
}

上面的代码执行以下更改：

• 将 page 指令更新为 @page "{id:int?}"。 "{id:int?}" 是一个路由模板。 路由模板将 URL 中的整数查询字符串更改为路由数据。 例如，单击仅带有 指令的讲师的 选择 链接，会生成如下所示的 URL：

  https://localhost:5001/Instructors?id=2

  如果页面指令为 @page "{id:int?}"，则 URL 为：https://localhost:5001/Instructors/2

• 添加一个“Office”列，该列仅在 不为 null 时显示 。 由于这是一对零或一的关系，因此可能没有相关的 OfficeAssignment 实体。

  @if (item.OfficeAssignment != null)
  {
      @item.OfficeAssignment.Location
  }
  

• 添加显示每位讲师所授课程的“课程”列。 有关此 razor 语法的详细信息，请参阅显式行转换。

• 添加代码，将 class="table-success" 动态添加到所选讲师和课程的 tr 元素中。 此时会使用 Bootstrap 类为所选行设置背景色。

  string selectedRow = "";
  if (item.CourseID == Model.CourseID)
  {
      selectedRow = "table-success";
  }
  <tr class="@selectedRow">
  

• 添加标记为“选择”的新的超链接。 该链接将所选讲师的 ID 发送给 Index 方法并设置背景色。

  <a asp-action="Index" asp-route-id="@item.ID">Select</a> |
  

• 添加所选讲师的课程表。

• 添加所选课程的学生注册表。

运行应用并选择讲师选项卡。该页面显示来自相关实体的（办公室）。 如果 OfficeAssignment 为 NULL，则显示空白表格单元格。

单击“选择”链接，选择讲师。 该行的样式会发生变化，并显示分配给该讲师的课程。

选择一门课程，查看已注册的学生及其成绩列表。

后续步骤

下一个教程将介绍如何更新相关数据。

上一个教程下一个教程