Bagian 6, Razor Halaman dengan EF Core inti ASP.NET - Membaca Data Terkait

Oleh Tom Dykstra, Jon P Smith, dan Rick Anderson

Aplikasi web Contoso University menunjukkan cara membuat Razor aplikasi web Pages menggunakan EF Core dan Visual Studio. Untuk informasi tentang seri tutorial, lihat tutorial pertama.

Jika Anda mengalami masalah yang tidak dapat Anda selesaikan, unduh aplikasi yang telah selesai dan bandingkan kode tersebut dengan apa yang Anda buat dengan mengikuti tutorial.

Tutorial ini menunjukkan cara membaca dan menampilkan data terkait. Data terkait adalah data yang EF Core dimuat ke dalam properti navigasi.

Ilustrasi berikut menunjukkan halaman yang telah selesai untuk tutorial ini:

Pemuatan bersemangat, eksplisit, dan malas

Ada beberapa cara yang EF Core dapat memuat data terkait ke dalam properti navigasi entitas:

• Pemuatan bersemangat. Pemuatan bersemangat adalah ketika kueri untuk satu jenis entitas juga memuat entitas terkait. Saat entitas dibaca, data terkait diambil. Ini biasanya menghasilkan satu kueri gabungan yang mengambil semua data yang diperlukan. EF Core akan mengeluarkan beberapa kueri untuk beberapa jenis pemuatan yang bersemangat. Mengeluarkan beberapa kueri bisa lebih efisien daripada kueri tunggal yang besar. Pemuatan bersemangat ditentukan dengan Include metode dan ThenInclude .

  

  Pemuatan bersemangat mengirim beberapa kueri saat navigasi koleksi disertakan:

  • Satu kueri untuk kueri utama
  • Satu kueri untuk setiap koleksi "tepi" di pohon beban.

• Kueri terpisah dengan Load: Data dapat diambil dalam kueri terpisah, dan EF Core "memperbaiki" properti navigasi. "Perbaikan" berarti secara EF Core otomatis mengisi properti navigasi. Kueri terpisah dengan Load lebih seperti pemuatan eksplisit daripada pemuatan yang bersemangat.

  

  Catatan:EF Core secara otomatis memperbaiki properti navigasi ke entitas lain yang sebelumnya dimuat ke dalam instans konteks. Bahkan jika data untuk properti navigasi tidak disertakan secara eksplisit, properti mungkin masih diisi jika beberapa atau semua entitas terkait sebelumnya dimuat.

• Pemuatan eksplisit. Saat entitas pertama kali dibaca, data terkait tidak diambil. Kode harus ditulis untuk mengambil data terkait saat diperlukan. Pemuatan eksplisit dengan kueri terpisah menghasilkan beberapa kueri yang dikirim ke database. Dengan pemuatan eksplisit, kode menentukan properti navigasi yang akan dimuat. Load Gunakan metode untuk melakukan pemuatan eksplisit. Contohnya:

  

• Pemuatan malas. Saat entitas pertama kali dibaca, data terkait tidak diambil. Saat pertama kali properti navigasi diakses, data yang diperlukan untuk properti navigasi tersebut diambil secara otomatis. Kueri dikirim ke database setiap kali properti navigasi diakses untuk pertama kalinya. Pemuatan malas dapat merusak performa, misalnya ketika pengembang menggunakan kueri N+1. Kueri N+1 memuat induk dan menghitung melalui turunan.

Membuat halaman Kursus

Entitas Course menyertakan properti navigasi yang berisi entitas terkait Department .

Untuk menampilkan nama departemen yang ditetapkan untuk kursus:

• Muat entitas terkait Department ke Course.Department dalam properti navigasi.
• Dapatkan nama dari Department properti entitas Name .

Halaman Kursus Perancah

Visual Studio

• Ikuti instruksi di halaman Scaffold Student dengan pengecualian berikut:

  • Buat folder Halaman/Kursus .
  • Gunakan Course untuk kelas model.
  • Gunakan kelas konteks yang ada alih-alih membuat yang baru.

Visual Studio Code

• Buat folder Halaman/Kursus .

• Jalankan perintah berikut untuk membuat perancah halaman Kursus.

  Di Windows:

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

  Di Linux atau macOS:

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

• Buka Pages/Courses/Index.cshtml.cs dan periksa metode .OnGetAsync Mesin perancah menentukan pemuatan bersemangat untuk Department properti navigasi. Metode Include menentukan pemuatan yang bersemangat.

• Jalankan aplikasi dan pilih tautan Kursus . Kolom departemen menampilkan DepartmentID, yang tidak berguna.

Menampilkan nama departemen

Perbarui Halaman/Kursus/Index.cshtml.cs dengan kode berikut:

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();
        }
    }
}

Kode sebelumnya mengubah properti menjadi Course Courses dan menambahkan AsNoTracking.

Kueri tanpa pelacakan berguna saat hasilnya digunakan dalam skenario baca-saja. Mereka umumnya lebih cepat untuk dijalankan karena tidak perlu menyiapkan informasi pelacakan perubahan. Jika entitas yang diambil dari database tidak perlu diperbarui, maka kueri tanpa pelacakan kemungkinan akan berkinerja lebih baik daripada kueri pelacakan.

Dalam beberapa kasus, kueri pelacakan lebih efisien daripada kueri tanpa pelacakan. Untuk informasi selengkapnya, lihat Melacak vs. Kueri Tanpa Pelacakan. Dalam kode sebelumnya, AsNoTracking dipanggil karena entitas tidak diperbarui dalam konteks saat ini.

Perbarui Pages/Courses/Index.cshtml dengan kode berikut.

@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>

Perubahan berikut telah dilakukan pada kode perancah:

• Course Mengubah nama properti menjadi Courses.

• Menambahkan kolom Angka yang memperlihatkan CourseID nilai properti. Secara default, kunci primer tidak di-scaffolding karena biasanya tidak berarti bagi pengguna akhir. Namun, dalam hal ini kunci primer bermakna.

• Mengubah kolom Departemen untuk menampilkan nama departemen. Kode menampilkan Name properti entitas yang dimuat Department ke Department dalam properti navigasi:

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

Jalankan aplikasi dan pilih tab Kursus untuk melihat daftar dengan nama departemen.

Memuat data terkait dengan Pilih

Metode memuat OnGetAsync data terkait dengan Include metode . Metode Select ini adalah alternatif yang hanya memuat data terkait yang diperlukan. Untuk item tunggal, seperti Department.Name menggunakan SQL INNER JOIN. Untuk koleksi, ia menggunakan akses database lain, tetapi juga Include operator pada koleksi.

Kode berikut memuat data terkait dengan Select metode :

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();
}

Kode sebelumnya tidak mengembalikan jenis entitas apa pun, oleh karena itu tidak ada pelacakan yang dilakukan. Untuk informasi selengkapnya tentang pelacakan EF, lihat Melacak vs. Kueri Tanpa Pelacakan.

CourseViewModel:

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

Lihat IndexSelectModel untuk Halaman lengkap Razor .

Membuat halaman Instruktur

Bagian ini membuat perancah halaman Instruktur dan menambahkan Kursus dan Pendaftaran terkait ke halaman Indeks Instruktur.

Halaman ini membaca dan menampilkan data terkait dengan cara berikut:

• Daftar instruktur menampilkan data terkait dari OfficeAssignment entitas (Office dalam gambar sebelumnya). Entitas Instructor dan OfficeAssignment berada dalam hubungan satu-ke-nol-atau-satu. Pemuatan bersemangat digunakan untuk OfficeAssignment entitas. Pemuatan bersemangat biasanya lebih efisien ketika data terkait perlu ditampilkan. Dalam hal ini, tugas kantor untuk instruktur ditampilkan.
• Saat pengguna memilih instruktur, entitas terkait Course ditampilkan. Entitas Instructor dan Course berada dalam hubungan banyak ke banyak. Pemuatan bersemangat digunakan untuk Course entitas dan entitas terkaitnya Department . Dalam hal ini, kueri terpisah mungkin lebih efisien karena hanya kursus untuk instruktur yang dipilih yang diperlukan. Contoh ini memperlihatkan cara menggunakan pemuatan bersemangat untuk properti navigasi di entitas yang berada di properti navigasi.
• Saat pengguna memilih kursus, data terkait dari Enrollments entitas ditampilkan. Pada gambar sebelumnya, nama siswa dan nilai ditampilkan. Entitas Course dan Enrollment berada dalam hubungan satu-ke-banyak.

Membuat model tampilan

Halaman instruktur memperlihatkan data dari tiga tabel yang berbeda. Model tampilan diperlukan yang mencakup tiga properti yang mewakili tiga tabel.

Buat Models/SchoolViewModels/InstructorIndexData.cs dengan kode berikut:

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; }
    }
}

Halaman Instruktur Perancah

Visual Studio

• Ikuti instruksi di Perancah halaman siswa dengan pengecualian berikut:

  • Buat folder Halaman/Instruktur .
  • Gunakan Instructor untuk kelas model.
  • Gunakan kelas konteks yang ada alih-alih membuat yang baru.

Visual Studio Code

• Buat folder Halaman/Instruktur .

• Jalankan perintah berikut untuk membuat perancah halaman Instruktur.

  Di Windows:

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

  Di Linux atau macOS:

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

Jalankan aplikasi dan navigasikan ke halaman Instruktur.

Perbarui Pages/Instructors/Index.cshtml.cs dengan kode berikut:

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;
            }
        }
    }
}

Metode OnGetAsync ini menerima data rute opsional untuk ID instruktur yang dipilih.

Periksa kueri dalam Pages/Instructors/Index.cshtml.cs file:

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();

Kode menentukan pemuatan bersemangat untuk properti navigasi berikut:

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

Kode berikut dijalankan ketika instruktur dipilih, yaitu, id != null.

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

Instruktur yang dipilih diambil dari daftar instruktur dalam model tampilan. Properti model Courses tampilan dimuat dengan Course entitas dari properti navigasi instruktur Courses yang dipilih.

Metode Where mengembalikan koleksi. Dalam hal ini, filter memilih satu entitas, sehingga metode dipanggil Single untuk mengonversi koleksi menjadi satu Instructor entitas. Entitas Instructor menyediakan akses ke Course properti navigasi.

Metode Single ini digunakan pada koleksi ketika koleksi hanya memiliki satu item. Metode Single ini melemparkan pengecualian jika koleksi kosong atau jika ada lebih dari satu item. Alternatifnya adalah SingleOrDefault, yang mengembalikan nilai default jika koleksi kosong. Untuk kueri ini, null dalam default yang dikembalikan.

Kode berikut mengisi properti model Enrollments tampilan saat kursus dipilih:

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;
}

Memperbarui halaman Indeks instruktur

Perbarui Pages/Instructors/Index.cshtml dengan kode berikut.

@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>
}

Kode sebelumnya membuat perubahan berikut:

• Memperbarui direktif page ke @page "{id:int?}". "{id:int?}" adalah templat rute. Templat rute mengubah string kueri bilangan bulat di URL untuk merutekan data. Misalnya, mengklik tautan Pilih untuk instruktur hanya dengan direktif @page menghasilkan URL seperti berikut:

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

  Ketika direktif halaman adalah @page "{id:int?}", URL-nya adalah: https://localhost:5001/Instructors/2

• Menambahkan kolom Office yang hanya ditampilkan item.OfficeAssignment.Location jika item.OfficeAssignment tidak null. Karena ini adalah hubungan satu-ke-nol-atau-satu, mungkin tidak ada entitas OfficeAssignment terkait.

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

• Menambahkan kolom Kursus yang menampilkan kursus yang diajarkan oleh setiap instruktur. Lihat Transisi garis eksplisit untuk informasi selengkapnya tentang sintaks pisau cukur ini.

• Menambahkan kode yang secara dinamis ditambahkan class="table-success" ke tr elemen instruktur dan kursus yang dipilih. Ini mengatur warna latar belakang untuk baris yang dipilih menggunakan kelas Bootstrap.

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

• Menambahkan hyperlink baru berlabel Pilih. Tautan ini mengirimkan ID instruktur yang dipilih ke Index metode dan mengatur warna latar belakang.

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

• Menambahkan tabel kursus untuk Instruktur yang dipilih.

• Menambahkan tabel pendaftaran siswa untuk kursus yang dipilih.

Jalankan aplikasi dan pilih tab Instruktur . Halaman menampilkan Location (office) dari entitas terkait OfficeAssignment . Jika OfficeAssignment null, sel tabel kosong ditampilkan.

Klik tautan Pilih untuk instruktur. Perubahan gaya baris dan kursus yang ditetapkan ke instruktur tersebut ditampilkan.

Pilih kursus untuk melihat daftar siswa terdaftar dan nilai mereka.

Langkah berikutnya

Tutorial berikutnya menunjukkan cara memperbarui data terkait.

Tutorialsebelumnya Tutorial berikutnya