Memulai dengan ASP.NET Core

Tutorial ini menunjukkan cara membuat, menjalankan, dan memodifikasi ASP.NET Core Blazor Web App menggunakan .NET CLI. Blazor adalah kerangka kerja web frontend .NET yang mendukung penyajian sisi server dan interaktivitas klien dalam satu model pemrograman.

Anda akan mempelajari cara:

• Buat Blazor Web App.
• Jalankan aplikasi.
• Ubah aplikasi.
• Matikan aplikasi.

Prerequisites

Dapatkan dan instal .NET SDK terbaru di Unduh .NET.

Membuat Blazor Web App

Buka shell perintah ke lokasi yang sesuai untuk aplikasi sampel dan gunakan perintah berikut untuk membuat Blazor Web App. Opsi -o|--output membuat folder untuk proyek dan memberi nama proyek BlazorSample:

dotnet new blazor -o BlazorSample

Menjalankan aplikasi

Ubah direktori ke BlazorSample folder dengan perintah berikut:

cd BlazorSample

Perintah dotnet watch menjalankan aplikasi dan membuka browser default Anda ke halaman arahan aplikasi:

dotnet watch

Dengan menggunakan navigasi bilah samping aplikasi, kunjungi halaman Penghitung, di mana Anda bisa memilih tombol Click me untuk menambahkan penghitung.

Mengubah aplikasi

Biarkan browser terbuka dengan halaman Penghitung dimuat. Dengan menggunakan dotnet watch perintah untuk menjalankan aplikasi, Anda dapat membuat perubahan pada markup dan kode aplikasi tanpa harus membangun kembali aplikasi untuk mencerminkan perubahan di browser.

Komponen CounterRazor yang merender halaman web Penghitung berada di Components/Pages/Counter.razor dalam proyek ini. Razor adalah sintaks untuk menggabungkan markup HTML dengan kode C# yang dirancang untuk produktivitas pengembang.

Counter.razor Buka file di editor teks dan catat beberapa baris menarik yang merender konten dan membuat fitur penghitung komponen berfungsi.

Components/Pages/Counter.razor:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

File dimulai dengan baris yang menunjukkan jalur relatif komponen (/counter):

@page "/counter"

Judul halaman diatur oleh <PageTitle> tag:

<PageTitle>Counter</PageTitle>

Judul H1 ditampilkan:

<h1>Counter</h1>

Elemen paragraf (<p>) menampilkan jumlah saat ini, yang disimpan dalam variabel bernama currentCount:

<p role="status">Current count: @currentCount</p>

Tombol (<button>) memungkinkan pengguna untuk menaikkan penghitung, yang terjadi ketika klik tombol menjalankan metode C# bernama IncrementCount:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code Blok berisi kode C# yang dijalankan komponen:

• Variabel currentCount penghitung ditetapkan dengan nilai awal nol.
• Metode IncrementCount ini didefinisikan. Kode dalam metode menaikkan currentCount variabel satu per satu setiap kali metode dipanggil.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Mari kita ubah penambahan penghitung dalam metode IncrementCount.

Ubah baris sehingga currentCount bertambah bertahap dengan nilai sepuluh setiap kali IncrementCount dipanggil:

- currentCount++;
+ currentCount += 10;

Simpan file tersebut.

Segera setelah Anda menyimpan file, aplikasi yang sedang berjalan diperbarui secara otomatis karena Anda menggunakan dotnet watch perintah . Kembali ke aplikasi di browser dan pilih tombol Click me di halaman Counter. Saksikan bagaimana penghitung sekarang meningkat dari nilai saat ini satu menjadi sebelas. Setiap kali tombol ditekan, nilai bertambah sepuluh.

Mematikan aplikasi

Ikuti langkah-langkah ini:

• Tutup jendela browser.
• Untuk mematikan aplikasi, tekan Ctrl+C di shell perintah.

Congratulations! Anda berhasil menyelesaikan tutorial ini.

Langkah selanjutnya

Dalam tutorial ini, Anda belajar cara:

• Buat Blazor Web App.
• Jalankan aplikasi.
• Ubah aplikasi.
• Matikan aplikasi.

Untuk mempelajari selengkapnya tentang dasar-dasar ASP.NET Core, lihat yang berikut ini:

gambaran umum dasar-dasar ASP.NET Core

Tutorial tambahan

Jenis aplikasi	Scenario	Tutorials
Aplikasi web	Pengembangan web server dan klien baru dengan Blazor	Membuat Blazor aplikasi daftar todo dan Membuat Blazor aplikasi database film (Gambaran Umum)
API untuk Web	Pemrosesan data berbasis server dengan API Minimal	Tutorial: Membuat API minimal dengan ASP.NET Core
Aplikasi Panggilan Prosedur Jarak Jauh (RPC)	Layanan berbasis kontrak pertama menggunakan Protocol Buffers	Membuat klien dan server .NET gRPC di ASP.NET Core
Aplikasi waktu nyata	Komunikasi dua arah server/klien	Mulai menggunakan ASP.NET Core SignalR

Sumber daya tambahan

• Pengantar .NET
• Visual Studio
• Visual Studio Code
• Komunitas Pengembang .NET
• .NET Live TV