Tutorial: Mulai menggunakan Razor Pages di ASP.NET Core

Oleh Rick Anderson

Ini adalah tutorial pertama dari seri yang mengajarkan dasar-dasar membangun aplikasi web ASP.NET Core Razor Pages.

Untuk pengenalan yang lebih canggih yang ditujukan untuk pengembang yang sudah memahami pengontrol dan tampilan, lihat Pengenalan Razor Halaman. Untuk pengenalan video, lihat Entity Framework Core untuk Pemula.

Jika Anda baru menggunakan pengembangan ASP.NET Core dan tidak yakin solusi antarmuka pengguna web ASP.NET Core mana yang paling sesuai dengan kebutuhan Anda, lihat Memilih UI Inti ASP.NET.

Di akhir tutorial ini, Anda akan memiliki Razor aplikasi web Pages yang mengelola database film.

Prerequisites

Visual Studio

• Visual Studio 2022 dengan beban kerja pengembangan ASP.NET dan web .

  

Visual Studio Code

• Visual Studio Code
• C# Dev Kit untuk Visual Studio Code
• .NET 9 SDK

Anda dapat mengikuti instruksi Visual Studio Code di macOS, Linux, atau Windows. Perubahan mungkin diperlukan jika Anda menggunakan lingkungan pengembangan terintegrasi (IDE) selain Visual Studio Code.

Membuat Razor aplikasi web Pages

Visual Studio

• Mulai Visual Studio dan pilih Proyek baru.

• Dalam dialog Buat proyek baru , pilih ASP.NET Core Web App (Razor Pages)>Berikutnya.

• Dalam dialog Konfigurasikan proyek baru Anda , masukkan RazorPagesMovie untuk Nama proyek. Penting untuk memberi nama proyek RazorPagesMovie, termasuk pencocokan kapitalisasi, sehingga namespace akan cocok saat Anda menyalin dan menempelkan kode contoh.

• Pilih Selanjutnya.

• Dalam dialog Informasi tambahan:

  • Pilih .NET 9.0.
  • Verifikasi: Jangan gunakan pernyataan tingkat atas tidak dicentang.

• Pilih Buat.

  

  Proyek pemula berikut dibuat:

  

Untuk pendekatan alternatif untuk membuat proyek, lihat Membuat proyek baru di Visual Studio.

Visual Studio Code

Tutorial mengasumsikan keakraban dengan Visual Studio Code. Untuk informasi selengkapnya, lihat Mulai menggunakan Visual Studio Code.

• Pilih Terminal Baru dari menu Terminal untuk membuka terminal terintegrasi.

• Ubah ke direktori (cd) yang akan berisi proyek.

• Jalankan perintah berikut:

  dotnet new webapp -o RazorPagesMovie
  code -r RazorPagesMovie
  

  Perintah dotnet new membuat proyek Pages baru Razor di folder RazorPagesMovie .

  Perintah code membuka folder RazorPagesMovie dalam instans Visual Studio Code saat ini.

Visual Studio Code mungkin menampilkan kotak dialog yang menanyakan: Apakah Anda mempercayai penulis file di folder ini?

• Jika Anda mempercayai semua file di folder induk, pilih Percayai penulis semua file di folder induk.
• Pilih Ya, saya mempercayai penulis karena folder proyek memiliki file yang dihasilkan oleh .NET.
• Saat Visual Studio Code meminta Anda menambahkan aset untuk membangun dan men-debug proyek, pilih Ya. Jika Visual Studio Code tidak menawarkan untuk menambahkan aset build dan debug, pilih Tampilkan>Palet Perintah dan ketikkan ".NET" ke dalam kotak pencarian. Dari daftar perintah, pilih .NET: Generate Assets for Build and Debug perintah .

Visual Studio Code menambahkan .vscode folder dengan file dan launch.json yang dihasilkantasks.json.

Menjalankan aplikasi

Visual Studio

Pilih RazorPagesMovie di Penjelajah Solusi, lalu tekan Ctrl+F5 untuk menjalankan aplikasi tanpa debugger.

Visual Studio menampilkan dialog berikut saat proyek belum dikonfigurasi untuk menggunakan SSL:

Pilih Ya jika Anda mempercayai sertifikat IIS Express SSL.

Dialog berikut ditampilkan:

Pilih Ya jika Anda setuju untuk mempercayai sertifikat pengembangan tersebut.

Untuk informasi tentang mempercayai browser Firefox, lihat Kesalahan sertifikat Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

Visual Studio:

• Menjalankan aplikasi, yang meluncurkan Kestrel server.
• Meluncurkan browser default di https://localhost:<port>, yang menampilkan UI aplikasi. <port> adalah port acak yang ditetapkan saat aplikasi dibuat.

Tutup jendela browser.

Visual Studio Code

• Percayai sertifikat pengembangan HTTPS dengan menjalankan perintah berikut:

  dotnet dev-certs https --trust
  

  Perintah sebelumnya menampilkan dialog berikut, asalkan sertifikat sebelumnya tidak tepercaya:

  

• Pilih Ya jika Anda setuju untuk mempercayai sertifikat pengembangan tersebut.

  Untuk informasi selengkapnya, lihat bagian Percayai sertifikat pengembangan ASP.NET Core HTTPS di artikel Memberlakukan SSL .

Untuk informasi tentang mempercayai browser Firefox, lihat Kesalahan sertifikat Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

Di Visual Studio Code, tekan Ctrl+F5 untuk menjalankan aplikasi tanpa debugging.

Pada perintah Pilih debugger , pilih C#.

Pada perintah Pilih Luncurkan Konfigurasi , pilih C#: RazorPagesMovie [https] RazorPagesMovie.

Browser default diluncurkan dengan URL berikut: https://localhost:<port> di mana <port> adalah nomor port yang dihasilkan secara acak.

Tutup jendela browser.

Di Visual Studio Code, dari menu Jalankan , pilih Hentikan Penelusuran Kesalahan atau tekan Shift+F5 untuk menghentikan aplikasi.

Memeriksa file proyek

Bagian berikut berisi gambaran umum folder dan file proyek utama yang akan Anda kerjakan di tutorial selanjutnya.

Folder Halaman

Berisi Razor halaman dan file pendukung. Setiap Razor halaman adalah sepasang file:

• File .cshtml yang memiliki markup HTML dengan kode C# menggunakan Razor sintaksis.
• File .cshtml.cs yang memiliki kode C# yang menangani peristiwa halaman.

File pendukung memiliki nama yang dimulai dengan garis bawah. Misalnya, _Layout.cshtml file mengonfigurasi elemen UI yang umum untuk semua halaman. _Layout.cshtml menyiapkan menu navigasi di bagian atas halaman dan pemberitahuan hak cipta di bagian bawah halaman. Untuk informasi selengkapnya, lihat Tata Letak di ASP.NET Core.

folder wwwroot

Berisi aset statis, seperti file HTML, file JavaScript, dan file CSS. Untuk informasi selengkapnya, lihat File statis di ASP.NET Core.

appsettings.json

Berisi data konfigurasi, seperti string koneksi. Untuk informasi selengkapnya, lihat Konfigurasi di ASP.NET Core.

Program.cs

Berisi kode berikut:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

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

app.UseAuthorization();

app.MapStaticAssets();
app.MapRazorPages();

app.Run();

Baris kode berikut dalam file ini membuat WebApplicationBuilder dengan default yang telah dikonfigurasi sebelumnya, menambahkan Razor dukungan Pages ke kontainer Dependency Injection (DI), dan membangun aplikasi:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

Halaman pengecualian pengembang diaktifkan secara default dan memberikan informasi bermanfaat tentang pengecualian. Aplikasi produksi tidak boleh dijalankan dalam mode pengembangan karena halaman pengecualian pengembang dapat membocorkan informasi sensitif.

Kode berikut mengatur titik akhir pengecualian ke /Error dan mengaktifkan HTTP Strict Transport Security Protocol (HSTS) saat aplikasi tidak berjalan dalam mode pengembangan:

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

Misalnya, kode sebelumnya berjalan saat aplikasi dalam mode produksi atau pengujian. Untuk informasi selengkapnya, lihat Menggunakan beberapa lingkungan di ASP.NET Core.

Kode berikut mengaktifkan berbagai Middleware:

• app.UseHttpsRedirection(); : Mengalihkan permintaan HTTP ke HTTPS.
• app.UseRouting(); : Menambahkan pencocokan rute ke alur middleware. Untuk informasi selengkapnya, lihat Perutean di ASP.NET Core.
• app.UseAuthorization(); : Mengotorisasi pengguna untuk mengakses sumber daya yang aman. Aplikasi ini tidak menggunakan otorisasi, oleh karena itu baris ini dapat dihapus.
• app.MapRazorPages();: Mengonfigurasi perutean titik akhir untuk Razor Pages.
• app.MapStaticAssets(); : Optimalkan pengiriman aset statis dalam aplikasi, seperti HTML, CSS, gambar, dan JavaScript. Untuk informasi selengkapnya, lihat Apa yang baru dalam ASP.NET Core di .NET 9.
• app.Run(); : Menjalankan aplikasi.

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 selanjutnya

Berikutnya: Menambahkan model