Membangun Blazor aplikasi database film (Bagian 2 - Menambahkan dan membuat kerangka model)

Artikel ini adalah bagian kedua dari Blazor tutorial aplikasi database film yang mengajarkan Anda dasar-dasar membangun ASP.NET Core Blazor Web App dengan fitur untuk mengelola database film.

Di bagian seri tutorial ini:

• Sebuah kelas ditambahkan ke aplikasi yang mewakili film dalam database.
• Layanan dan alat Entity Framework Core (EF Core) membuat konteks dan database database. EF Core adalah pemeta relasional objek (O/RM) yang menyederhanakan akses data. Anda menulis kelas model terlebih dahulu, dan EF Core membuat database dari kelas model, yang disebut perancah.
• Alat tambahan menyediakan perancah untuk UI berbasis komponen agar dapat berinteraksi dengan catatan film dalam database melalui konteks database.

Tambahkan model data

Di Penjelajah Solusi, klik kanan proyek dan pilih BlazorWebAppMovies>. Beri nama folder Models.

Klik kanan folder Models. Pilih Tambahkan>Kelas. Beri nama file Movie.cs. Gunakan konten berikut ini untuk file.

Tambahkan folder ke proyek bernama Models.

Tambahkan file kelas ke Models folder bernama Movie.cs. Gunakan konten berikut ini untuk file.

Tambahkan folder ke proyek bernama Models.

Tambahkan file kelas ke Models folder bernama Movie.cs. Gunakan konten berikut ini untuk file.

Models/Movie.cs:

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace BlazorWebAppMovies.Models;

public class Movie
{
    public int Id { get; set; }

    public string? Title { get; set; }

    public DateOnly ReleaseDate { get; set; }

    public string? Genre { get; set; }

    [DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }
}

Kelas Movie berisi:

• Properti pengidentifikasi rekaman (Id), yang diperlukan oleh EF Core dan database untuk melacak rekaman. Dalam database, properti Id adalah kunci utama catatan.
• Properti lain yang mendeskripsikan aspek film:
  • Judul (Title)
  • Tanggal rilis (ReleaseDate)
  • Genre (Genre)
  • Harga (Price)

Tanda tanya pada string jenis menunjukkan bahwa properti dapat bernilai null (dapat menyimpan nilai null).

Penyedia EF Core database memilih jenis data berdasarkan jenis .NET properti model. Penyedia juga memperhitungkan metadata lain yang disediakan oleh System.ComponentModel.DataAnnotations, yang merupakan sekumpulan kelas atribut yang ditempatkan di atas properti model dengan format yang berikut ini, di mana placeholder {ANNOTATION} adalah nama anotasi. Anda dapat menempatkan beberapa anotasi pada baris yang sama yang dipisahkan oleh koma di dalam tanda kurung siku, atau Anda dapat menempatkan beberapa anotasi pada baris terpisah, yang merupakan pendekatan yang diadopsi oleh seri tutorial ini.

[{ANNOTATION}]

Properti Price dalam Movie file kelas memiliki dua anotasi data:

[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal Price { get; set; }

Anotasi ini menentukan:

• Bahwa properti menyimpan jenis data mata uang.
• Kolom database memiliki desimal sebanyak 18 digit dengan dua tempat desimal.

Informasi selengkapnya tentang anotasi data, termasuk menambahkan anotasi data untuk validasi, dibahas di bagian selanjutnya dari seri tutorial.

Pilih Build>Build Solution dari bilah menu atau tekan F6 pada keyboard. Konfirmasikan di panel Output bahwa build berhasil.

Menambahkan paket dan alat Nuget

Untuk menambahkan paket dan alat NuGet yang diperlukan, jalankan perintah .NET CLI berikut di Terminal (menu > Terminal Baru).

Tempelkan semua perintah berikut pada prompt (>) Terminal. Saat Anda menempelkan beberapa perintah, muncul peringatan yang menyatakan bahwa beberapa perintah akan dijalankan. Abaikan peringatan dan lanjutkan dengan operasi tempel.

Saat Anda menempelkan beberapa perintah, semua perintah dijalankan kecuali perintah terakhir. Perintah terakhir tidak dijalankan hingga Anda menekan Enter pada keyboard.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter
dotnet add package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore

Penting

Setelah delapan perintah pertama dijalankan, pastikan Anda menekan Enter pada keyboard untuk menjalankan perintah terakhir.

Catatan

Perintah sebelumnya adalah perintah .NET CLI, dan perintah .NET CLI dijalankan saat dimasukkan pada prompt PowerShell, yang merupakan shell perintah default dari Terminal Visual Studio Code.

Simpan file proyek.

Perintah sebelumnya menambahkan:

• Alat antarmuka baris perintah (CLI) untuk EF Core.
• aspnet-codegenerator alat perancah.
• Alat waktu desain untuk EF Core.
• Penyedia SQLite dan SQL Server dengan paket EF Core sebagai dependensi.
• Microsoft.VisualStudio.Web.CodeGeneration.Design untuk perancah.
• Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore untuk menggunakan metode ekstensi AddDatabaseDeveloperPageExceptionFilter dalam berkas Program, yang menangkap pengecualian terkait database.

Di Palet Perintah (Ctrl+Shift+P), gunakan .NET: Build perintah untuk membangun aplikasi.

Konfirmasikan bahwa aplikasi berhasil dibuat.

Menambahkan paket dan alat Nuget

Untuk menambahkan paket dan alat NuGet yang diperlukan, jalankan perintah .NET CLI berikut dalam shell perintah yang dibuka ke folder akar proyek.

Tempelkan perintah-perintah berikut ke prompt (>) pada shell perintah. Saat Anda menempelkan beberapa perintah, muncul peringatan yang menyatakan bahwa beberapa perintah akan dijalankan. Abaikan peringatan dan lanjutkan dengan operasi tempel.

Saat Anda menempelkan beberapa perintah, semua perintah dijalankan kecuali perintah terakhir. Perintah terakhir tidak dijalankan hingga Anda menekan Enter pada keyboard.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter
dotnet add package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore

Simpan file proyek.

Perintah sebelumnya menambahkan:

• Alat antarmuka baris perintah (CLI) untuk EF Core.
• aspnet-codegenerator alat perancah.
• Alat waktu desain untuk EF Core.
• Penyedia SQLite dan SQL Server dengan paket EF Core sebagai dependensi.
• Microsoft.VisualStudio.Web.CodeGeneration.Design untuk perancah.
• Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore untuk menggunakan metode ekstensi AddDatabaseDeveloperPageExceptionFilter dalam berkas Program, yang menangkap pengecualian terkait database.

Dalam shell perintah yang dibuka ke folder akar proyek, jalankan perintah dotnet build.

dotnet build

Konfirmasikan bahwa aplikasi berhasil dibuat.

Merancang kerangka model

Di bagian ini, Movie model digunakan untuk membuat perancah konteks database dan UI untuk mengelola film dalam database. Perancah .NET adalah kerangka kerja pembuatan kode untuk aplikasi .NET. Anda menggunakan perancah untuk menambahkan database dan kode UI dengan cepat yang berinteraksi dengan model data.

Klik kanan pada Components/Pages folder dan pilih Tambahkan>Item Perancah Baru:

Dengan dialog Tambahkan Item Perancah Baru terbuka ke Terpasang>Umum>Blazor>RazorKomponen, pilih Razor. Pilih tombol Tambahkan.

CRUD adalah akronim untuk Buat, Baca, Perbarui, dan Hapus. Perancah menghasilkan komponen buat, edit, hapus, detail, dan indeks untuk aplikasi.

Selesaikan dialog Tambahkan Razor Komponen menggunakan Kerangka Kerja Entitas (CRUD):

• Daftar dropdown Templat menyertakan templat lain untuk membuat komponen buat, edit, hapus, detail, dan daftar secara khusus. Daftar dropdown ini berguna ketika Anda hanya perlu membuat jenis komponen tertentu yang diatur ke kelas model. Biarkan daftar dropdown Template diatur ke CRUD untuk membangun seperangkat komponen lengkap.
• Pada daftar dropdown kelas Model, pilih Film (BlazorWebAppMovies.Models).
• Untuk kelas DbContext, pilih tombol + (tanda plus).
• Dalam dialog modal Tambahkan Konteks Data, nama BlazorWebAppMovies.Data.BlazorWebAppMoviesContext kelas dibuat. Gunakan nilai default yang dihasilkan. Pilih tombol Tambahkan.
• Setelah dialog model ditutup, daftar dropdown Penyedia database default ke SQL Server. Saat membuat aplikasi di masa mendatang, Anda dapat memilih penyedia yang sesuai untuk database yang Anda gunakan. Opsinya termasuk SQLite, PostgreSQL, dan Azure Cosmos DB. Biarkan daftar dropdown Penyedia database diatur ke SQL Server.
• Pilih Tambahkan.

Di Terminal (menu > Terminal Baru) yang dibuka ke direktori akar proyek, jalankan perintah berikut. SQLite digunakan sebagai database untuk pengguna yang mengadopsi alat Visual Studio Code untuk seri tutorial ini.

dotnet aspnet-codegenerator blazor CRUD -dbProvider sqlite -dc BlazorWebAppMovies.Data.BlazorWebAppMoviesContext -m Movie -outDir Components/Pages

CRUD adalah akronim untuk Buat, Baca, Perbarui, dan Hapus. Generator blazor dengan template CRUD menghasilkan komponen untuk membuat, mengedit, menghapus, melihat detail, dan indeks aplikasi ini.

Tabel berikut merinci opsi generator kode ASP.NET Core yang digunakan dalam perintah sebelumnya:

• -dbProvider: Penyedia database yang akan digunakan. Opsi termasuk sqlserver (default), sqlite, cosmos, postgres.
• -dc: Kelas DbContext yang akan digunakan, termasuk namespace (BlazorWebAppMovies.Data).
• -m: Nama model.
• -outDir: Direktori output untuk komponen yang dihasilkan. Folder dibuat dari nama model di direktori output untuk menahan komponen (misalnya, MoviePages dalam hal ini).

Dalam shell perintah yang dibuka ke folder akar proyek, jalankan perintah berikut. SQLite digunakan sebagai database untuk pengguna yang mengadopsi alat .NET CLI untuk seri tutorial ini.

dotnet aspnet-codegenerator blazor CRUD -dbProvider sqlite -dc BlazorWebAppMovies.Data.BlazorWebAppMoviesContext -m Movie -outDir Components/Pages

CRUD adalah akronim untuk Buat, Baca, Perbarui, dan Hapus. Generator blazor dengan template CRUD menghasilkan komponen untuk membuat, mengedit, menghapus, melihat detail, dan indeks aplikasi ini.

Tabel berikut merinci opsi generator kode ASP.NET Core yang digunakan dalam perintah sebelumnya:

• -dbProvider: Penyedia database yang akan digunakan. Opsi termasuk sqlserver (default), sqlite, cosmos, postgres.
• -dc: Kelas DbContext yang akan digunakan, termasuk namespace (BlazorWebAppMovies.Data).
• -m: Nama model.
• -outDir: Direktori output untuk komponen yang dihasilkan. Folder dibuat dari nama model di direktori output untuk menahan komponen (misalnya, MoviePages dalam hal ini).

File appsettings.json diperbarui dengan string koneksi yang digunakan untuk menyambungkan ke database lokal. Dalam contoh berikut, {CONNECTION STRING} adalah string koneksi yang secara otomatis dihasilkan oleh perancah:

"ConnectionStrings": {
  "BlazorWebAppMoviesContext": "{CONNECTION STRING}"
}

Peringatan

Jangan menyimpan rahasia aplikasi, string koneksi, kredensial, kata sandi, nomor identifikasi pribadi (PIN), kode C#/.NET privat, atau kunci/token privat dalam kode sisi klien, yang selalu tidak aman. Di lingkungan pengujian/penahapan dan produksi, kode sisi Blazor server dan API web harus menggunakan alur autentikasi aman yang menghindari mempertahankan kredensial dalam kode proyek atau file konfigurasi. Di luar pengujian pengembangan lokal, sebaiknya hindari penggunaan variabel lingkungan untuk menyimpan data sensitif, karena variabel lingkungan bukanlah pendekatan yang paling aman. Untuk pengujian pengembangan lokal, alat Secret Manager direkomendasikan untuk mengamankan data sensitif. Untuk informasi selengkapnya, lihat Mempertahankan data dan kredensial sensitif dengan aman.

File-file dibuat dan diperbarui oleh perancah

Proses perancah membuat file komponen dan file kelas konteks database film berikut:

• Components/Pages/MoviePages
  • Create.razor: Membuat entitas film baru.
  • Delete.razor: Menghapus entitas film.
  • Details.razor: Menampilkan detail entitas dari film.
  • Edit.razor: Memperbarui entitas film.
  • Index.razor: Mencantumkan entitas film (rekaman) dalam database.
• Data/BlazorWebAppMoviesContext.cs: Konteks file database (DbContext).

File komponen dalam MoviePages folder dijelaskan secara lebih rinci di bagian berikutnya dari tutorial ini. Konteks database dijelaskan nanti dalam artikel ini.

Jika folder dan aset tidak ada setelah perancah, kembali ke bagian Perancah model dan perancah ulang Movie model, pastikan Anda memilih perancah Razor Komponen menggunakan Kerangka Kerja Entitas (CRUD) di bawah bagian Terinstal dan Umum Komponen dalam dialog Tambahkan Item Perancah Baru.

ASP.NET Core dibangun dengan injeksi dependensi, yang merupakan pola desain perangkat lunak untuk mencapai Inversion of Control (IoC) antara kelas dan dependensinya. Layanan, seperti konteks database EF Core, terdaftar dengan injeksi ketergantungan selama memulai aplikasi. Layanan ini disuntikkan ke dalam Razor komponen agar dapat digunakan olehnya.

komponen QuickGrid adalah komponen Razor untuk menampilkan data secara efisien dalam bentuk tabular. Perancah menempatkan QuickGrid komponen dalam Index komponen (Components/Pages/Index.razor) untuk menampilkan entitas film. Panggilan AddQuickGridEntityFrameworkAdapter pada kumpulan layanan menambahkan EF Core adaptor untuk QuickGrid mengenali EF Coreinstans -yang disediakan IQueryable<T> dan untuk menyelesaikan kueri database secara asinkron untuk efisiensi.

Dalam kombinasi dengan UseDeveloperExceptionPage, AddDatabaseDeveloperPageExceptionFilter menangkap pengecualian terkait database yang dapat diselesaikan dengan menggunakan migrasi Kerangka Kerja Entitas. Ketika pengecualian ini terjadi, respons HTML dihasilkan dengan detail tentang kemungkinan tindakan untuk menyelesaikan masalah.

Kode berikut ditambahkan ke Program file oleh perancah:

builder.Services.AddDbContextFactory<BlazorWebAppMoviesContext>(options =>
    options.UseSqlServer(
        builder.Configuration.GetConnectionString("BlazorWebAppMoviesContext") ?? 
        throw new InvalidOperationException(
            "Connection string 'BlazorWebAppMoviesContext' not found.")));

builder.Services.AddQuickGridEntityFrameworkAdapter();

builder.Services.AddDatabaseDeveloperPageExceptionFilter();

Membuat skema database awal menggunakan EF Corefitur migrasi

Fitur migrasi di EF Core:

• Membuat skema database awal.
• Memperbarui skema database secara bertahap agar tetap sinkron dengan model data aplikasi. Data yang ada dalam database dipertahankan.

EF Core mengadopsi pendekatan code-first untuk desain dan pemeliharaan database:

• Kelas entitas dibuat dan diperbarui terlebih dahulu di aplikasi.
• Database dibuat dan diperbarui dari kelas entitas aplikasi.

Ini adalah prosedur terbalik dari pendekatan database-first , di mana database dirancang, dibangun, dan diperbarui terlebih dahulu. Mengadopsi pendekatan code-first EF Corebertujuan untuk mempercepat proses pengembangan aplikasi karena sebagian besar pembuatan database dan prosedur manajemen yang sulit dan memakan waktu ditangani secara transparan oleh alat EF Core, sehingga Anda dapat fokus pada pengembangan aplikasi.

Di bagian ini, Visual Studio Connected Services digunakan untuk mengeluarkan EF Core perintah yang:

• Tambahkan migrasi awal.
• Perbarui database menggunakan migrasi awal.

Di Penjelajah Solusi, dua kali klik Layanan Tersambung. Di area SQL Server Express LocalDB dari Dependensi Layanan, pilih elipsis (...) diikuti dengan Tambahkan migrasi:

Beri migrasi sebuah Nama MigrasiInitialCreate, yang merupakan nama yang menjelaskan migrasi. Tunggu hingga konteks database dimuat di bidang nama kelas DbContext, yang mungkin memakan waktu beberapa detik. Pilih Selesai untuk membuat migrasi:

Pilih tombol Tutup setelah operasi selesai.

Menambahkan migrasi menghasilkan kode untuk membuat skema database awal. Skema didasarkan pada model yang ditentukan dalam DbContext.

Pilih elipsis (...) lagi diikuti oleh perintah Perbarui database :

Dialog Perbarui database dengan migrasi terbaru terbuka. Tunggu hingga bidang nama kelas DbContext diperbarui dan agar migrasi sebelumnya dimuat, yang mungkin memakan waktu beberapa detik. Pilih tombol Selesai :

Perintah pembaruan basis data menjalankan migrasi metode Up yang belum diterapkan dalam file kode migrasi yang dibuat oleh scaffolder. Dalam hal ini, perintah menjalankan Up metode dalam Migrations/{TIME STAMP}_InitialCreate.cs file, yang membuat database. Penampung sementara {TIME STAMP} adalah penanda waktu.

Pilih tombol Tutup setelah operasi selesai.

BlazorWebAppMovies Klik kanan file proyek (BlazorWebAppMovies.csproj) dan pilih Buka di Terminal Terintegrasi.

Jendela Terminal terbuka dengan perintah di direktori proyek, yang berisi Program file dan file proyek aplikasi (.csproj).

Jalankan perintah .NET CLI berikut untuk menambahkan migrasi awal. Perintah migrations menghasilkan kode untuk membuat skema database awal. Skema didasarkan pada model yang ditentukan dalam DbContext. Argumen InitialCreate digunakan untuk memberi nama migrasi. Nama apa pun dapat digunakan, tetapi konvensinya adalah menggunakan nama yang menjelaskan migrasi.

dotnet ef migrations add InitialCreate

Setelah perintah sebelumnya selesai, perbarui database dengan update perintah . Perintah update menjalankan metode Up pada migrasi yang belum diaplikasikan dalam file kode migrasi yang dibuat oleh scaffolder. Dalam hal ini, perintah menjalankan metode migrasi Up di berkas Migrations/{TIME STAMP}_InitialCreate.cs, yang membentuk database. Penampung sementara {TIME STAMP} adalah penanda waktu.

dotnet ef database update

Dari folder akar proyek, jalankan perintah .NET CLI berikut untuk menambahkan migrasi awal. Perintah migrations menghasilkan kode untuk membuat skema database awal. Skema didasarkan pada model yang ditentukan dalam DbContext. Argumen InitialCreate digunakan untuk memberi nama migrasi. Nama apa pun dapat digunakan, tetapi konvensinya adalah menggunakan nama yang menjelaskan migrasi.

dotnet ef migrations add InitialCreate

Setelah perintah sebelumnya selesai, perbarui database dengan update perintah . Perintah update menjalankan metode Up pada migrasi yang belum diaplikasikan dalam file kode migrasi yang dibuat oleh scaffolder. Dalam hal ini, perintah menjalankan metode migrasi Up di berkas Migrations/{TIME STAMP}_InitialCreate.cs, yang membentuk database. Penampung sementara {TIME STAMP} adalah penanda waktu.

dotnet ef database update

Konteks BlazorWebAppMoviesContext database (Data/BlazorWebAppMoviesContext.cs):

• Berasal dari Microsoft.EntityFrameworkCore.DbContext.
• Menentukan entitas mana yang disertakan dalam model data.
• Mengoordinasikan EF Core fungsionalitas, seperti operasi CRUD, untuk model Movie.
• DbSet<TEntity> Berisi properti untuk Movie kumpulan entitas. Dalam terminologi EF, kumpulan entitas biasanya sesuai dengan tabel database. Entitas sesuai dengan baris dalam tabel.

Nama string koneksi diteruskan ke konteks dengan memanggil metode pada DbContextOptions objek. Untuk pengembangan lokal, string koneksi dibaca dari appsettings.json file.

Peringatan

Jangan menyimpan rahasia aplikasi, string koneksi, kredensial, kata sandi, nomor identifikasi pribadi (PIN), kode C#/.NET privat, atau kunci/token privat dalam kode sisi klien, yang selalu tidak aman. Di lingkungan pengujian/penahapan dan produksi, kode sisi Blazor server dan API web harus menggunakan alur autentikasi aman yang menghindari mempertahankan kredensial dalam kode proyek atau file konfigurasi. Di luar pengujian pengembangan lokal, sebaiknya hindari penggunaan variabel lingkungan untuk menyimpan data sensitif, karena variabel lingkungan bukanlah pendekatan yang paling aman. Untuk pengujian pengembangan lokal, alat Secret Manager direkomendasikan untuk mengamankan data sensitif. Untuk informasi selengkapnya, lihat Mempertahankan data dan kredensial sensitif dengan aman.

Menguji aplikasi

Jalankan aplikasi.

Tambahkan /movies ke URL di bilah alamat browser untuk menavigasi ke halaman film Index .

Setelah halaman Index dimuat, pilih tautan Create New.

Tambahkan film ke database. Dalam contoh berikut, film sci-fi klasik The Matrix (©1999 Warner Bros. Entertainment Inc.) ditambahkan sebagai entri film pertama. Memilih tombol Create menambahkan film ke database:

Saat Anda memilih tombol Create , data film diposting ke server dan disimpan dalam database.

Di .NET 9, debugger Visual Studio dapat rusak dengan NavigationException pada baris yang menavigasi kembali ke Index halaman:

Untuk mengatasi masalah ini:

1. Hapus centang kotak untuk Hentikan saat jenis pengecualian ini ditangani oleh pengguna.
2. Pilih tombol Lanjutkan di bilah menu untuk melanjutkan eksekusi.

Pengecualian tidak muncul ketika metode NavigateTo dijalankan sepanjang sisa seri tutorial.

Di .NET 10 atau yang lebih baru:

• Pembaruan pada cara NavigateTo mengatur navigasi tidak pernah menghasilkan NavigationException.
• Debugger Visual Studio tidak berhenti saat memproses NavigateTo panggilan dengan titik akhir yang valid.

Saat aplikasi kembali ke Index halaman, entitas yang ditambahkan akan muncul:

Edit Buka halaman. Edit rekaman film dan simpan perubahan.

Delete Periksa halaman, tetapi jangan hapus film Matriks dari database. Kehadiran rekaman film ini berharga dalam langkah tutorial berikutnya di mana HTML yang dirender dipelajari dan beberapa penyempurnaan dilakukan pada data yang ditampilkan. Jika Anda sudah menghapus film, tambahkan film ke database lagi menggunakan Create halaman sebelum melanjutkan ke bagian berikutnya dari seri tutorial.

Menghentikan aplikasi

Hentikan aplikasi menggunakan salah satu pendekatan berikut:

• Tutup jendela browser.
• Di Visual Studio, Anda dapat memilih salah satu dari:

  • Gunakan tombol Berhenti di bilah menu Visual Studio:

    

  • Tekan Shift+F5 pada keyboard.

Hentikan aplikasi menggunakan pendekatan berikut:

1. Tutup jendela browser.
2. Di Visual Studio Code, Anda bisa melakukan salah satu dari berikut ini:
   • Dari menu Jalankan, pilih Berhenti Debug.
   • Tekan Shift+F5 pada keyboard.

Hentikan aplikasi menggunakan pendekatan berikut:

1. Tutup jendela browser.
2. Dari jendela perintah, tekan Ctrl+C.

Pemecahan masalah menggunakan sampel yang sudah selesai

Jika Anda mengalami masalah saat mengikuti tutorial yang tidak dapat Anda atasi dari teks, bandingkan kode Anda dengan proyek yang telah selesai di Blazor repositori sampel:

Blazor contoh-contoh repositori GitHub (dotnet/blazor-samples)

Pilih folder versi terbaru. Folder sampel untuk proyek tutorial ini diberi nama BlazorWebAppMovies.

Sumber Daya Tambahan:

EF Core dokumentasi:

• Inti Kerangka Kerja Entitas
• Referensi alat Entity Framework Core - .NET Core CLI
• Jenis Data
• SaveChangesAsync: Dokumen API mencakup informasi dasar tentang bagaimana entitas disimpan dan deteksi perubahan.
• Kelas dan metode berbasis Startup lingkungan
• dotnet aspnet-codegenerator
• Injeksi ketergantungan di ASP.NET Core
• Blazor komponenQuickGrid`

Hukum

The Matrix adalah hak cipta dari Warner Bros. Entertainment Inc..

Langkah berikutnya

Sebelumnya: Buat Blazor Web AppBerikutnya: Pelajari tentang komponen Razor