Latihan - Menambahkan Halaman Razor baru

  • 10 menit

Di unit sebelumnya, Anda mendapatkan kode sumber untuk proyek Contoso Pizza, dan kemudian Anda membuat beberapa perubahan sederhana pada halaman beranda. Di unit ini, Anda akan menambahkan halaman Razor baru ke proyek.

Buat halaman Daftar Pizza

Untuk membuat halaman Razor baru, Anda akan menggunakan .NET CLI.

  1. Karena terminal diblokir oleh dotnet watch perintah, buka terminal lain dengan mengklik kanan folder ContosoPizza di Explorer dan pilih Buka di Terminal Terintegrasi.

  2. Di jendela terminal baru, masukkan perintah berikut:

    dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages

    Perintah sebelumnya:

    • Membuat dua file ini di ContosoPizza.Pages namespace:
      • PizzaList.cshtml - halaman Razor
      • PizzaList.cshtml.cs - kelas yang menyertainya PageModel
    • Menyimpan kedua file di subdirektori Halaman proyek.

  3. Di Pages/PizzaList.cshtml, tambahkan kode berikut di dalam @{ } blok kode:

    ViewData["Title"] = "Pizza List 🍕";

    Ini mengatur <title> elemen untuk halaman.

  4. Di akhir file, tambahkan kode berikut ke ujung file:

    <h1>Pizza List 🍕</h1>

<!-- New Pizza form will go here -->

<!-- List of pizzas will go here -->

    Ini menambahkan judul ke halaman, serta dua tempat penampung komentar HTML untuk fungsionalitas yang akan Anda tambahkan nanti.

  5. Simpan berkas. Jika Anda menggunakan GitHub Codespaces, file akan disimpan secara otomatis.

  6. Kembali ke terminal yang menjalankan dotnet watch, dan pilih Ctrl+R untuk memuat ulang aplikasi dan mendeteksi file baru.

Menambahkan halaman Daftar Pizza ke menu navigasi

Ini akan menjadi waktu yang tepat untuk menguji halaman, tetapi halaman tidak dapat dijangkau di browser karena belum ditautkan di menu navigasi. Anda akan menautkannya sekarang.

  1. Buka Pages/Shared/_Layout.cshtml.

  2. <ul> Dalam elemen dengan navbar-nav kelas (dimulai pada baris 21), perhatikan <li> elemen yang berisi tautan ke halaman Beranda dan Privasi. Tambahkan kode berikut ke akhir daftar, setelah <li> elemen yang berisi tautan Privasi :

    <li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
</li>

    Ini menambahkan tautan ke halaman PizzaList ke menu navigasi.

  3. Simpan berkas. Tab browser dengan aplikasi secara otomatis di-refresh untuk menampilkan perubahan. Jika Anda menggunakan GitHub Codespaces, file akan disimpan secara otomatis, tetapi Anda harus me-refresh tab browser secara manual.

  4. Pilih tautan Daftar Pizza 🍕 di menu navigasi. Halaman Daftar Pizza muncul.

Daftarkan kelas PizzaService dengan kontainer injeksi dependensi

Halaman Daftar Pizza bergantung pada objek PizzaService untuk mengambil daftar pizza. Anda akan menggunakan injeksi dependensi untuk menyediakan objek PizzaService ke halaman. Pertama, daftarkan PizzaService class dengan kontainer.

  1. Buka Program.cs.

  2. Di bagian yang menambahkan layanan ke kontainer, tambahkan kode berikut:

    builder.Services.AddScoped<PizzaService>();

    Kode ini mendaftarkan PizzaService kelas dengan kontainer injeksi dependensi. Metode ini AddScoped menunjukkan bahwa objek baru PizzaService harus dibuat untuk setiap permintaan HTTP. PizzaService Sekarang dapat disuntikkan ke halaman Razor mana pun.

  3. Simpan berkas. Jika Anda menggunakan GitHub Codespaces, file akan disimpan secara otomatis.

Menampilkan daftar pizza

Mari kita ubah PageModel kelas untuk halaman Daftar Pizza untuk mengambil daftar pizza dari PizzaService objek dan menyimpannya di properti.

  1. Buka Halaman/PizzaList.cshtml.cs.

  2. Tambahkan pernyataan berikut using ke bagian atas file:

    using ContosoPizza.Models;
using ContosoPizza.Services;

    Pernyataan ini mengimpor jenis Pizza dan PizzaService yang akan Anda gunakan di halaman.

  3. Di dalam blok namespace ContosoPizza.Pages, ganti seluruh kelas PizzaListModel dengan kode berikut:

    public class PizzaListModel : PageModel
{
    private readonly PizzaService _service;
    public IList<Pizza> PizzaList { get;set; } = default!;

    public PizzaListModel(PizzaService service)
    {
        _service = service;
    }

    public void OnGet()
    {
        PizzaList = _service.GetPizzas();
    }
}

    Dalam kode sebelumnya:

    • Sebuah PizzaService privat readonly yang bernama _service telah dibuat. Variabel ini akan menyimpan referensi ke PizzaService objek.
      • Kata readonly kunci menunjukkan bahwa nilai _service variabel tidak dapat diubah setelah diatur dalam konstruktor.
    • Properti PizzaList didefinisikan untuk menyimpan daftar pizza.
      • Jenis IList<Pizza> menunjukkan bahwa properti PizzaList akan menyimpan objek daftar Pizza.
      • PizzaList diinisialisasi untuk default! menunjukkan kepada pengkompilasi bahwa itu akan diinisialisasi nanti, sehingga pemeriksaan keamanan null tidak diperlukan.
    • Konstruktor menerima PizzaService objek.
      • Objek PizzaService disediakan oleh injeksi dependensi.
    • Metode OnGet didefinisikan untuk mengambil daftar pizza dari PizzaService objek dan menyimpannya di PizzaList properti .

    Tips

    Jika Anda memerlukan bantuan untuk memahami keamanan null, lihat Keamanan null di C#.

  4. Simpan berkas. Jika Anda menggunakan GitHub Codespaces, file akan disimpan secara otomatis.

  5. Kembali ke terminal yang berjalan dotnet watch dan tekan Ctrl+R untuk memuat ulang aplikasi dengan layanan terdaftar dan konstruktor baru untuk PizzaListModel.

Menampilkan daftar pizza

Sekarang setelah halaman memiliki akses ke daftar pizza, Anda akan menggunakan daftar itu untuk menampilkan pizza di halaman.

  1. Buka Pages/PizzaList.cshtml.

  2. Ganti komentar <!-- List of pizzas will go here --> dengan kode berikut:

    <table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var pizza in Model.PizzaList)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
    </tbody>
</table>

    Dalam kode sebelumnya:

    • Elemen <table> dibuat untuk menampilkan daftar pizza.
    • Elemen <thead> dibuat untuk menahan header tabel.
    • Pernyataan @foreach di dalam <tbody> melewati daftar pizza.
      • Properti Model mengacu pada objek PizzaListModel yang dibuat dalam file code-behind.
      • Properti PizzaList mengacu pada PizzaList yang ditentukan dalam file code-behind.
    • Setiap iterasi @foreach pernyataan membuat <tr> elemen untuk menyimpan data pizza:
      • Sintaks razor digunakan untuk menampilkan data pizza dalam elemen <td>. Sintaks ini digunakan untuk menampilkan properti Pizza objek yang disimpan dalam pizza variabel.
      • Price diformat menggunakan interpolasi string C#.
      • Ekspresi terner digunakan untuk menampilkan nilai IsGlutenFree properti sebagai "✔️" atau sel kosong.
      • Formulir dibuat untuk menghapus pizza.
        • Atribut asp-page-handler menunjukkan bahwa formulir harus dikirimkan ke Delete handler dalam file code-behind. Anda akan membuat handler tersebut di unit selanjutnya.
        • Atribut asp-route-id menunjukkan bahwa Id properti Pizza objek harus diteruskan ke Delete handler.

  3. Simpan berkas. Di peramban, halaman Daftar Pizza diperbarui dengan daftar pizza. Jika Anda menggunakan GitHub Codespaces, file akan disimpan secara otomatis, tetapi Anda harus me-refresh tab browser secara manual.

Tangkapan layar halaman Daftar Pizza dengan daftar yang berfungsi.

Kerja bagus! Anda telah membuat halaman Razor yang menampilkan daftar pizza. Di unit berikutnya, Anda akan mempelajari tentang tag helper dan page handler.