Tutorial: Mulai menggunakan Razor Pages di ASP.NET Core

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

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 terbiasa dengan pengontrol dan tampilan, lihat Pengenalan Razor Halaman. Untuk pengenalan video, lihat Entity Framework Core untuk Pemula.

Jika Anda masih baru dalam pengembangan ASP.NET Core dan tidak yakin dengan solusi web UI ASP.NET Core mana yang paling sesuai dengan kebutuhan Anda, lihat Memilih UI ASP.NET Core.

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

Home atau halaman Indeks

Prasyarat

Membuat Razor aplikasi web Pages

  • 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 mencocokkan kapitalisasi, sehingga namespace akan cocok saat Anda menyalin dan menempelkan kode contoh.

  • Pilih Selanjutnya.

  • Dalam dialog Informasi tambahan:

    • Pilih .NET 8.0 (Dukungan Jangka Panjang).
    • Verifikasi: Jangan gunakan pernyataan tingkat atas tidak dicentang.
  • Pilih Buat.

    Informasi Tambahan

    Proyek pemula berikut dibuat:

    Penjelajah Solusi

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

Menjalankan aplikasi

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

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

Proyek ini dikonfigurasi untuk menggunakan SSL. Untuk menghindari peringatan SSL di browser, Anda dapat memilih untuk mempercayai sertifikat yang ditandatangani sendiri yang telah dihasilkan IIS Express. Apakah Anda ingin mempercayai sertifikat IIS Express SSL?

Pilih Ya jika Anda mempercayai sertifikat IIS Express SSL.

Dialog berikut ditampilkan:

Dialog peringatan keamanan

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.

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 lebih lanjut, 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.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

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 lebih lanjut, lihat Menggunakan beberapa lingkungan di ASP.NET Core.

Kode berikut mengaktifkan berbagai Middleware:

  • app.UseHttpsRedirection(); : Mengalihkan permintaan HTTP ke HTTPS.
  • app.UseStaticFiles(); : Mengaktifkan file statis, seperti HTML, CSS, gambar, dan JavaScript untuk dilayani. Untuk informasi selengkapnya, lihat File statis di ASP.NET Core.
  • app.UseRouting(); : Menambahkan pencocokan rute ke alur middleware. Untuk informasi selengkapnya, lihat Perutean di ASP.NET Core
  • app.MapRazorPages();: Mengonfigurasi perutean titik akhir untuk Razor Pages.
  • app.UseAuthorization(); : Mengotorisasi pengguna untuk mengakses sumber daya yang aman. Aplikasi ini tidak menggunakan otorisasi, oleh karena itu baris ini dapat dihapus.
  • 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 berikutnya

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 terbiasa dengan pengontrol dan tampilan, lihat Pengenalan Razor Halaman. Untuk pengenalan video, lihat Entity Framework Core untuk Pemula.

Jika Anda masih baru dalam pengembangan ASP.NET Core dan tidak yakin dengan solusi web UI ASP.NET Core mana yang paling sesuai dengan kebutuhan Anda, lihat Memilih UI ASP.NET Core.

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

Home atau halaman Indeks

Prasyarat

Membuat Razor aplikasi web Pages

  • Mulai Visual Studio dan pilih Buat proyek baru.

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

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

  • Pilih Selanjutnya.

  • Dalam dialog Informasi tambahan:

    • Pilih .NET 7.0 (Dukungan Istilah Standar).
    • Verifikasi: Jangan gunakan pernyataan tingkat atas tidak dicentang.
  • Pilih Buat.

    Informasi Tambahan

    Proyek pemula berikut dibuat:

    Penjelajah Solusi

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

Menjalankan aplikasi

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

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

Proyek ini dikonfigurasi untuk menggunakan SSL. Untuk menghindari peringatan SSL di browser, Anda dapat memilih untuk mempercayai sertifikat yang ditandatangani sendiri yang telah dihasilkan IIS Express. Apakah Anda ingin mempercayai sertifikat IIS Express SSL?

Pilih Ya jika Anda mempercayai sertifikat IIS Express SSL.

Dialog berikut ditampilkan:

Dialog peringatan keamanan

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.

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 lebih lanjut, 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.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

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 lebih lanjut, lihat Menggunakan beberapa lingkungan di ASP.NET Core.

Kode berikut mengaktifkan berbagai Middleware:

  • app.UseHttpsRedirection(); : Mengalihkan permintaan HTTP ke HTTPS.
  • app.UseStaticFiles(); : Mengaktifkan file statis, seperti HTML, CSS, gambar, dan JavaScript untuk dilayani. Untuk informasi selengkapnya, lihat File statis di ASP.NET Core.
  • app.UseRouting(); : Menambahkan pencocokan rute ke alur middleware. Untuk informasi selengkapnya, lihat Perutean di ASP.NET Core
  • app.MapRazorPages();: Mengonfigurasi perutean titik akhir untuk Razor Pages.
  • app.UseAuthorization(); : Mengotorisasi pengguna untuk mengakses sumber daya yang aman. Aplikasi ini tidak menggunakan otorisasi, oleh karena itu baris ini dapat dihapus.
  • 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 berikutnya

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 terbiasa dengan pengontrol dan tampilan, lihat Pengenalan Razor Halaman. Untuk pengenalan video, lihat Entity Framework Core untuk Pemula.

Jika Anda masih baru dalam pengembangan ASP.NET Core dan tidak yakin dengan solusi web UI ASP.NET Core mana yang paling sesuai dengan kebutuhan Anda, lihat Memilih UI ASP.NET Core.

Di akhir seri, Anda akan memiliki aplikasi yang mengelola database film.

Di tutorial ini, Anda akan:

  • Membuat Razor aplikasi web Pages.
  • Jalankan aplikasi.
  • Periksa file proyek.

Di akhir tutorial ini, Anda akan memiliki aplikasi web Pages yang berfungsi Razor yang akan Anda tingkatkan dalam tutorial selanjutnya.

Home atau halaman Indeks

Prasyarat

Membuat Razor aplikasi web Pages

  1. Mulai Visual Studio 2022 dan pilih Buat proyek baru.

    Membuat proyek baru dari jendela mulai

  2. Dalam dialog Buat proyek baru, pilih ASP.NET Core Web App, lalu pilih Berikutnya.

    Membuat ASP.NET Core Web App

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

    Mengonfigurasi proyek baru Anda

  4. Pilih Selanjutnya.

  5. Dalam dialog Informasi tambahan, pilih .NET 6.0 (Dukungan jangka panjang) lalu pilih Buat.

    Informasi Tambahan

Proyek pemula berikut dibuat:

Penjelajah Solusi

Menjalankan aplikasi

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

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

Proyek ini dikonfigurasi untuk menggunakan SSL. Untuk menghindari peringatan SSL di browser, Anda dapat memilih untuk mempercayai sertifikat yang ditandatangani sendiri yang telah dihasilkan IIS Express. Apakah Anda ingin mempercayai sertifikat IIS Express SSL?

Pilih Ya jika Anda mempercayai sertifikat IIS Express SSL.

Dialog berikut ditampilkan:

Dialog peringatan keamanan

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:5001, yang menampilkan UI 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. File ini 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 lebih lanjut, 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.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

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 lebih lanjut, lihat Menggunakan beberapa lingkungan di ASP.NET Core.

Kode berikut mengaktifkan berbagai Middleware:

  • app.UseHttpsRedirection(); : Mengalihkan permintaan HTTP ke HTTPS.
  • app.UseStaticFiles(); : Mengaktifkan file statis, seperti HTML, CSS, gambar, dan JavaScript untuk dilayani. Untuk informasi selengkapnya, lihat File statis di ASP.NET Core.
  • app.UseRouting(); : Menambahkan pencocokan rute ke alur middleware. Untuk informasi selengkapnya, lihat Perutean di ASP.NET Core
  • app.MapRazorPages();: Mengonfigurasi perutean titik akhir untuk Razor Pages.
  • app.UseAuthorization(); : Mengotorisasi pengguna untuk mengakses sumber daya yang aman. Aplikasi ini tidak menggunakan otorisasi, oleh karena itu baris ini dapat dihapus.
  • 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 berikutnya

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 terbiasa dengan pengontrol dan tampilan, lihat Pengenalan Razor Halaman.

Jika Anda masih baru dalam pengembangan ASP.NET Core dan tidak yakin dengan solusi web UI ASP.NET Core mana yang paling sesuai dengan kebutuhan Anda, lihat Memilih UI ASP.NET Core.

Di akhir seri, Anda akan memiliki aplikasi yang mengelola database film.

Di tutorial ini, Anda akan:

  • Membuat Razor aplikasi web Pages.
  • Jalankan aplikasi.
  • Periksa file proyek.

Di akhir tutorial ini, Anda akan memiliki aplikasi web Pages yang berfungsi Razor yang akan Anda tingkatkan dalam tutorial selanjutnya.

Home atau halaman Indeks

Prasyarat

Membuat Razor aplikasi web Pages

  1. Mulai Visual Studio dan pilih Buat proyek baru. Untuk informasi selengkapnya, lihat Membuat proyek baru di Visual Studio.

    Membuat proyek baru dari jendela mulai

  2. Dalam dialog Buat proyek baru, pilih ASP.NET Core Web Application, lalu pilih Berikutnya.

    Membuat Aplikasi Web ASP.NET Core

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

  4. Pilih Buat.

    Mengonfigurasi proyek

  5. Dalam dialog Buat aplikasi web ASP.NET Core baru, pilih:

    1. .NET Core dan ASP.NET Core 5.0 di menu dropdown.
    2. Aplikasi Web.
    3. Buat.

    Pilih ASP.NET Core Web App

Proyek pemula berikut dibuat:

Penjelajah Solusi

Menjalankan aplikasi

  • Tekan Ctrl+F5 untuk menjalankan tanpa debugger.

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

    Proyek ini dikonfigurasi untuk menggunakan SSL. Untuk menghindari peringatan SSL di browser, Anda dapat memilih untuk mempercayai sertifikat yang ditandatangani sendiri yang telah dihasilkan IIS Express. Apakah Anda ingin mempercayai sertifikat IIS Express SSL?

    Pilih Ya jika Anda mempercayai sertifikat IIS Express SSL.

    Dialog berikut ditampilkan:

    Dialog peringatan keamanan

    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 memulai IIS Express dan menjalankan aplikasi. Bilah alamat menunjukkan localhost:port# dan bukan sesuatu seperti example.com. Itu karena localhost adalah nama host standar untuk komputer lokal. Localhost hanya melayani permintaan web dari komputer lokal. Saat Visual Studio membuat proyek web, port acak digunakan untuk server web.

Memeriksa file proyek

Berikut adalah 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. File ini 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 lebih lanjut, lihat Konfigurasi di ASP.NET Core.

Program.cs

Berisi titik masuk untuk aplikasi. Untuk informasi lebih lanjut, lihat .NET Generic Host di ASP.NET Core.

Startup.cs

Berisi kode yang mengonfigurasi perilaku aplikasi. Untuk informasi selengkapnya, lihat Pengaktifan aplikasi di ASP.NET Core.

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

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 terbiasa dengan pengontrol dan tampilan, lihat Pengenalan Razor Halaman.

Di akhir seri, Anda akan memiliki aplikasi yang mengelola database film.

Lihat atau unduh sampel kode (cara mengunduh).

Di tutorial ini, Anda akan:

  • Membuat Razor aplikasi web Pages.
  • Jalankan aplikasi.
  • Periksa file proyek.

Di akhir tutorial ini, Anda akan memiliki aplikasi web Pages yang berfungsi Razor yang akan Anda bangun di tutorial selanjutnya.

Halaman Home atau Indeks

Prasyarat

Membuat Razor aplikasi web Pages

  • Dari menu File Visual Studio, pilih Proyek Baru>.

  • Buat Aplikasi Web ASP.NET Core baru dan pilih Berikutnya. Membuat proyek baru dari jendela mulai

  • Beri nama proyek RazorPagesMovie. Penting untuk memberi nama proyek RazorPagesMovie sehingga namespace akan cocok saat Anda menyalin dan menempelkan kode. Beri nama proyek

  • Pilih ASP.NET Core 3.1 di menu dropdown, Aplikasi Web, lalu pilih Buat.

Pilih Aplikasi Web ASP.NET Core

Proyek pemula berikut dibuat:

Penjelajah Solusi

Menjalankan aplikasi

  • Tekan Ctrl+F5 untuk menjalankan tanpa debugger.

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

    Proyek ini dikonfigurasi untuk menggunakan SSL. Untuk menghindari peringatan SSL di browser, Anda dapat memilih untuk mempercayai sertifikat yang ditandatangani sendiri yang telah dihasilkan IIS Express. Apakah Anda ingin mempercayai sertifikat IIS Express SSL?

    Pilih Ya jika Anda mempercayai sertifikat IIS Express SSL.

    Dialog berikut ditampilkan:

    Dialog peringatan keamanan

    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 memulai IIS Express dan menjalankan aplikasi. Bilah alamat menunjukkan localhost:port# dan bukan sesuatu seperti example.com. Itu karena localhost adalah nama host standar untuk komputer lokal. Localhost hanya melayani permintaan web dari komputer lokal. Saat Visual Studio membuat proyek web, port acak digunakan untuk server web.

Memeriksa file proyek

Berikut adalah 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. File ini 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 file 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 lebih lanjut, lihat Konfigurasi di ASP.NET Core.

Program.cs

Berisi titik masuk untuk program. Untuk informasi lebih lanjut, lihat .NET Generic Host di ASP.NET Core.

Startup.cs

Berisi kode yang mengonfigurasi perilaku aplikasi. Untuk informasi selengkapnya, lihat Pengaktifan aplikasi di ASP.NET Core.

Langkah berikutnya