Bagian 2, tambahkan model ke Razor aplikasi Pages di ASP.NET Core

Dalam tutorial ini, kelas ditambahkan untuk mengelola film dalam database. Kelas model aplikasi menggunakan Entity Framework Core (EF Core) untuk bekerja dengan database. EF Core adalah pemeta relasional objek (O/RM) yang menyederhanakan akses data. Anda menulis kelas model terlebih dahulu, dan EF Core membuat database.

Kelas model dikenal sebagai kelas POCO (dari "P lain-O ld CLR Objects") karena mereka tidak memiliki dependensi pada EF Core. Mereka menentukan properti data yang disimpan dalam database.

Menambahkan model data

Visual Studio

1. Di Penjelajah Solusi, klik Razorkanan proyek >PagesMovie Tambahkan>Folder Baru. Beri nama folder Models.

2. Models Klik kanan folder. Pilih Tambahkan>Kelas. Beri nama kelas Film.

3. Tambahkan properti berikut ke Movie kelas :

   using System.ComponentModel.DataAnnotations;
   
   namespace RazorPagesMovie.Models;
   
   public class Movie
   {
       public int Id { get; set; }
       public string? Title { get; set; }
       [DataType(DataType.Date)]
       public DateTime ReleaseDate { get; set; }
       public string? Genre { get; set; }
       public decimal Price { get; set; }
   }
   

Kelas Movie berisi:

• Bidang ID diperlukan oleh database untuk kunci utama.

• Atribut [DataType] yang menentukan jenis data dalam ReleaseDate properti . Dengan atribut ini:

  • Pengguna tidak diharuskan memasukkan informasi waktu di bidang tanggal.
  • Hanya tanggal yang ditampilkan, bukan informasi waktu.

• Tanda tanya setelah string menunjukkan bahwa properti dapat diubah ke null. Untuk informasi selengkapnya, lihat Jenis nilai yang dapat diubah ke null.

DataAnnotations dibahas dalam tutorial selanjutnya.

Bangun proyek untuk memverifikasi tidak ada kesalahan kompilasi.

Visual Studio Code

1. Tambahkan folder bernama Models.
2. Tambahkan kelas ke Models folder bernama Movie.cs.

Tambahkan properti berikut ke Movie kelas :

using System.ComponentModel.DataAnnotations;

namespace RazorPagesMovie.Models;

public class Movie
{
    public int Id { get; set; }
    public string? Title { get; set; }
    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }
    public string? Genre { get; set; }
    public decimal Price { get; set; }
}

Kelas Movie berisi:

• Bidang ID untuk menyediakan kunci primer untuk database.

• Atribut [DataType] untuk menentukan jenis data di ReleaseDate bidang . Dengan atribut ini:

  • Pengguna tidak diharuskan memasukkan informasi waktu di bidang tanggal.
  • Hanya tanggal yang ditampilkan, bukan informasi waktu.

• Tanda tanya setelah string menunjukkan bahwa properti dapat diubah ke null. Untuk informasi selengkapnya, lihat Jenis nilai yang dapat diubah ke null.

DataAnnotations dibahas dalam tutorial selanjutnya.

Menambahkan paket NuGet dan alat EF

Jalankan perintah .NET CLI berikut:

dotnet tool uninstall --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool uninstall --global dotnet-ef
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.Design
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

Perintah sebelumnya menambahkan:

• Alat antarmuka baris perintah (CLI) untuk EF Core
• Alat perancah aspnet-codegenerator.
• Alat waktu desain untuk EF Core
• Penyedia EF Core SQLite, yang menginstal EF Core paket sebagai dependensi.
• Paket yang diperlukan untuk perancah: Microsoft.VisualStudio.Web.CodeGeneration.Design dan Microsoft.EntityFrameworkCore.SqlServer.

Untuk panduan tentang beberapa konfigurasi lingkungan yang mengizinkan aplikasi mengonfigurasi konteks databasenya berdasarkan lingkungan, lihat Menggunakan beberapa lingkungan di ASP.NET Core.

Catatan

Secara default arsitektur biner .NET yang akan diinstal mewakili arsitektur OS yang sedang berjalan. Untuk menentukan arsitektur OS yang berbeda, lihat penginstalan alat dotnet, opsi --arch. Untuk informasi selengkapnya, lihat Masalah GitHub dotnet/AspNetCore.Docs #29262.

Di Visual Studio Code, tekan Ctrl+F5 (Windows) atau ⌘+F5 (macOS) untuk menjalankan aplikasi tanpa penelusuran kesalahan.

Di Panel di bawah wilayah editor, pilih tab MASALAH, atau dari menu Tampilan, pilih Masalah jika saat ini tidak terlihat. Pastikan tidak ada kesalahan kompilasi.

Visual Studio untuk Mac

1. Di Jendela Alat Solusi, klikRazor kontrol proyek PagesMovie, lalu pilih Tambahkan>Folder Baru.... Beri nama folder Models.

2. Models Klik kontrol folder, lalu pilih Tambahkan>Kelas Baru....

3. Dalam dialog File Baru:

   1. Pilih Umum di panel kiri.
   2. Pilih Kelas Kosong di panel tengah.
   3. Beri nama kelas Film dan pilih Buat.

4. Tambahkan properti berikut ke Movie kelas :

   using System.ComponentModel.DataAnnotations;
   
   namespace RazorPagesMovie.Models;
   
   public class Movie
   {
       public int Id { get; set; }
       public string? Title { get; set; }
       [DataType(DataType.Date)]
       public DateTime ReleaseDate { get; set; }
       public string? Genre { get; set; }
       public decimal Price { get; set; }
   }
   

Kelas Movie berisi:

• Bidang ID untuk menyediakan kunci primer untuk database.

• Atribut [DataType] untuk menentukan jenis data di ReleaseDate bidang . Dengan atribut ini:

  • Pengguna tidak diharuskan memasukkan informasi waktu di bidang tanggal.
  • Hanya tanggal yang ditampilkan, bukan informasi waktu.

DataAnnotations dibahas dalam tutorial selanjutnya.

Bangun proyek untuk memverifikasi tidak ada kesalahan kompilasi.

Perancah model film

Di bagian ini, model film di-scaffold. Artinya, alat perancah menghasilkan halaman untuk operasi Buat, Baca, Perbarui, dan Hapus (CRUD) untuk model film.

Visual Studio

1. Buat folder Halaman/Film:

   1. Klik kanan pada folder >Halaman Tambahkan>Folder Baru.
   2. Beri nama folder Film.

2. Klik kanan pada folder> Halaman/Film Tambahkan>Item Perancah Baru.

   

3. Dalam dialog Tambahkan Perancah Baru, pilih Razor Halaman menggunakan Kerangka Kerja Entitas (CRUD)>Tambahkan.

   

4. Selesaikan dialog Tambahkan Razor Halaman menggunakan Kerangka Kerja Entitas (CRUD):

   1. Di menu drop-down Kelas model , pilih Film (RazorPagesMovie.Models).
   2. Di baris Kelas konteks data, pilih + tanda (plus).
      1. Dalam dialog Tambahkan Konteks Data, nama RazorPagesMovie.Data.RazorPagesMovieContext kelas dibuat.
      2. Di menu drop-down Penyedia database, pilih SQL Server.
   3. Pilih Tambahkan.

   

File appsettings.json diperbarui dengan string koneksi digunakan untuk menyambungkan ke database lokal.

Visual Studio Code

• Buka shell perintah ke direktori proyek, yang berisi Program.cs file dan .csproj . Jalankan perintah berikut:

  dotnet aspnet-codegenerator razorpage -m Movie -dc RazorPagesMovie.Data.RazorPagesMovieContext -udl -outDir Pages/Movies --referenceScriptLibraries --databaseProvider sqlite
  

Tabel berikut merinci opsi generator kode ASP.NET Core.

Opsi	Deskripsi
-m	Nama model.
-dc	Kelas DbContext yang digunakan termasuk namespace layanan.
-udl	Gunakan tata letak default.
-outDir	Jalur folder output relatif untuk membuat tampilan.
--referenceScriptLibraries	_ValidationScriptsPartial Menambahkan ke Edit dan Buat halaman

-h Gunakan opsi untuk mendapatkan bantuan pada dotnet aspnet-codegenerator razorpage perintah:

dotnet aspnet-codegenerator razorpage -h

Untuk informasi selengkapnya, lihat dotnet aspnet-codegenerator.

Gunakan SQLite untuk pengembangan, SQL Server untuk produksi

Ketika SQLite dipilih, kode yang dihasilkan templat siap untuk pengembangan. Kode berikut menunjukkan cara memilih string koneksi SQLite dalam pengembangan dan SQL Server dalam produksi.

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();

if (builder.Environment.IsDevelopment())
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext")));
}
else
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlServer(builder.Configuration.GetConnectionString("ProductionMovieContext")));
}

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Kode sebelumnya tidak memanggil UseDeveloperExceptionPage dalam pengembangan karena WebApplication panggilan UseDeveloperExceptionPage dalam mode pengembangan.

Visual Studio untuk Mac

1. Tambahkan paket Microsoft.EntityFrameworkCore.SqliteNuGet , yang diperlukan untuk alat perancah.

   1. Di Jendela Alat Solusi, klikRazor kontrol proyek PagesMovie, lalu pilih Buka di Terminal.

   Jendela Terminal terbuka dengan prompt perintah di direktori proyek, yang berisi file Program.cs dan .csproj.

   1. Jalankan perintah .NET CLI berikut:

     dotnet add package Microsoft.EntityFrameworkCore.SQLite
   

2. Buat folder Halaman/Film :

   1. Klik kontrol pada folder >Halaman Tambahkan>Folder Baru.
   2. Beri nama folder Film.

3. Klik kontrol pada folder> Halaman/Film Tambahkan>Perancah Baru....

   

4. Dalam dialog Perancah Baru, pilih Razor Halaman menggunakan Kerangka Kerja Entitas (CRUD)>Berikutnya.

   

5. Selesaikan dialog Tambahkan Razor Halaman menggunakan Kerangka Kerja Entitas (CRUD):

   1. Di kelas Model yang akan digunakan: baris, masukkan Movie.
   2. Di Kelas DbContext untuk digunakan: baris, beri nama kelas RazorPagesMovie.Data.RazorPagesMovieContext.
   3. Pilih Selesai.

   

Proses perancah mungkin membutuhkan waktu untuk diselesaikan karena paket yang diperlukan diunduh secara otomatis dan ditambahkan ke proyek.

File appsettings.json diperbarui dengan string koneksi digunakan untuk menyambungkan ke database lokal.

Gunakan SQLite untuk pengembangan, SQL Server untuk produksi

Ketika SQLite dipilih, kode yang dihasilkan templat siap untuk pengembangan. Kode berikut menunjukkan cara memilih string koneksi SQLite dalam pengembangan dan SQL Server dalam produksi.

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();

if (builder.Environment.IsDevelopment())
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext")));
}
else
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlServer(builder.Configuration.GetConnectionString("ProductionMovieContext")));
}

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Kode sebelumnya tidak memanggil UseDeveloperExceptionPage dalam pengembangan karena WebApplication panggilan UseDeveloperExceptionPage dalam mode pengembangan.

File dibuat dan diperbarui

Proses perancah membuat file berikut:

• Halaman/Film: Buat, Hapus, Detail, Edit, dan Indeks.
• Data/RazorPagesMovieContext.cs

File yang dibuat dijelaskan dalam tutorial berikutnya.

Proses perancah menambahkan kode yang disorot berikut ke Program.cs file:

Visual Studio

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using RazorPagesMovie.Data;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Visual Studio Code / Visual Studio untuk Mac

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Perubahan Program.cs dijelaskan nanti dalam tutorial ini.

Membuat skema database awal menggunakan fitur migrasi EF

Fitur migrasi di Entity Framework Core menyediakan cara untuk:

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

Visual Studio

Di bagian ini, jendela Package Manager Console (PMC) digunakan untuk:

• Tambahkan migrasi awal.
• Perbarui database dengan migrasi awal.

1. Dari menu Alat, pilih Pengelola Paket NuGet>Konsol Pengelola Paket.

   

2. Di PMC, masukkan perintah berikut:

   Add-Migration InitialCreate
   Update-Database
   

• Perintah Add-Migration 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 menurut konvensi, nama dipilih yang menjelaskan migrasi.

• Perintah Update-Database menjalankan Up metode dalam migrasi yang belum diterapkan. Dalam hal ini, perintah menjalankan Up metode dalam Migrations/<time-stamp>_InitialCreate.cs file, yang membuat database.

Visual Studio Code

• RazorKlik kanan proyek PagesMovie.csproj, lalu pilih Buka di Terminal Terintegrasi.

  Jendela Terminal terbuka dengan prompt perintah di direktori proyek, yang berisi file Program.cs dan .csproj.

• Jalankan perintah .NET CLI berikut:

  dotnet ef migrations add InitialCreate
  dotnet ef database update
  

• 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 menurut konvensi, nama dipilih yang menjelaskan migrasi.

• Perintah update menjalankan Up metode dalam migrasi yang belum diterapkan. Dalam hal ini, update menjalankan Up metode dalam Migrations/<time-stamp>_InitialCreate.cs file, yang membuat database.

Catatan

Untuk SQLite, jenis kolom untuk Price bidang diatur ke TEXT. Ini diselesaikan di langkah selanjutnya.

Visual Studio untuk Mac

• RazorKlik kontrol proyek PagesMovie, lalu pilih Buka di Terminal.

  Jendela Terminal terbuka dengan prompt perintah di direktori proyek, yang berisi file Program.cs dan .csproj.

• Jalankan perintah .NET CLI berikut:

  dotnet tool uninstall --global dotnet-ef
  dotnet tool install --global dotnet-ef
  dotnet ef migrations add InitialCreate
  dotnet ef database update
  

• Perintah tool menginstal alat Entity Framework Core terbaru setelah menghapus instalan versi sebelumnya, jika ada.

  Catatan

  Secara default arsitektur biner .NET yang akan diinstal mewakili arsitektur OS yang sedang berjalan. Untuk menentukan arsitektur OS yang berbeda, lihat penginstalan alat dotnet, opsi --arch. Untuk informasi selengkapnya, lihat Masalah GitHub dotnet/AspNetCore.Docs #29262.

• 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 menurut konvensi, nama dipilih yang menjelaskan migrasi.

• Perintah update menjalankan Up metode dalam migrasi yang belum diterapkan. Dalam hal ini, update menjalankan Up metode dalam Migrations/<time-stamp>_InitialCreate.cs file, yang membuat database.

Catatan

Untuk SQLite, jenis kolom untuk Price bidang diatur ke TEXT. Ini diselesaikan di langkah selanjutnya.

Peringatan berikut ditampilkan, yang ditangani di langkah selanjutnya:

Tidak ada jenis yang ditentukan untuk kolom desimal 'Harga' pada jenis entitas 'Film'. Ini akan menyebabkan nilai terpotong secara diam-diam jika tidak cocok dalam presisi dan skala default. Tentukan jenis kolom server SQL secara eksplisit yang dapat mengakomodasi semua nilai menggunakan 'HasColumnType()'.

Konteks RazorPagesMovieContextdata :

• Berasal dari Microsoft.EntityFrameworkCore.DbContext.
• Menentukan entitas mana yang disertakan dalam model data.
• EF Core Mengoordinasikan fungsionalitas, seperti Buat, Baca, Perbarui, dan Hapus, untuk model tersebutMovie.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie.Models;

namespace RazorPagesMovie.Data
{
    public class RazorPagesMovieContext : DbContext
    {
        public RazorPagesMovieContext (DbContextOptions<RazorPagesMovieContext> options)
            : base(options)
        {
        }

        public DbSet<RazorPagesMovie.Models.Movie> Movie { get; set; } = default!;
    }
}

Kode sebelumnya membuat properti DbSet<Movie> untuk kumpulan entitas. Dalam terminologi Entity Framework, kumpulan entitas biasanya sesuai dengan tabel database. Entitas sesuai dengan baris dalam tabel.

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

Menguji aplikasi

1. Jalankan aplikasi dan tambahkan /Movies ke URL di browser (http://localhost:port/movies).

   Jika Anda menerima kesalahan berikut:

   SqlException: Cannot open database "RazorPagesMovieContext-GUID" requested by the login. The login failed.
   Login failed for user 'User-name'.
   

   Anda melewatkan langkah migrasi.

2. Uji tautan Buat Baru.

   

   Catatan

   Anda mungkin tidak dapat memasukkan koma desimal di Price bidang . Untuk mendukung validasi jQuery untuk lokal non-Bahasa Inggris yang menggunakan koma (",") untuk titik desimal dan untuk format tanggal non-Bahasa Inggris AS, aplikasi harus di globalisasi. Untuk instruksi globalisasi, lihat masalah GitHub ini.

3. Uji tautan Edit, Detail, dan Hapus.

Tutorial berikutnya menjelaskan file yang dibuat oleh perancah.

Memeriksa konteks yang terdaftar dengan injeksi dependensi

ASP.NET Core dibangun dengan injeksi dependensi. Layanan, seperti EF Core konteks database, terdaftar dengan injeksi dependensi selama startup aplikasi. Komponen yang memerlukan layanan ini (seperti Razor Pages) disediakan melalui parameter konstruktor. Kode konstruktor yang mendapatkan instans konteks database ditampilkan nanti dalam tutorial.

Alat perancah secara otomatis membuat konteks database dan mendaftarkannya dengan kontainer injeksi dependensi. Kode yang disorot berikut ditambahkan ke Program.cs file oleh perancah:

Visual Studio

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using RazorPagesMovie.Data;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Visual Studio Code / Visual Studio untuk Mac

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Pemecahan masalah dengan sampel yang telah selesai

Jika Anda mengalami masalah yang tidak dapat Anda atasi, bandingkan kode Anda dengan proyek yang telah selesai. Lihat atau unduh proyek yang selesai (cara mengunduh).

Langkah berikutnya

Sebelumnya: MemulaiBerikutnya: Halaman Yang Di-perancah Razor