Buat aplikasi web pertama Anda dengan ASP.NET Core menggunakan Blazor

Windows Linux macOS

Coba penghitung

Di aplikasi yang sedang berjalan, navigasikan ke halaman Penghitung dengan mengklik tab Penghitung di bilah sisi sebelah kiri. Halaman berikut kemudian harus ditampilkan:

Halaman Penghitung menampilkan tombol Klik saya untuk menambah jumlah yang diperlihatkan pada halaman.

Pilih tombol Klik saya untuk menambah jumlah tanpa refresh halaman. Penambahan penghitung di halaman web biasanya memerlukan penulisan JavaScript, tetapi dengan Blazor, Anda dapat menggunakan C#.

Anda dapat menemukan implementasi komponen Counter di file Counter.razor yang terletak di dalam direktori Components/Pages.

Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer

<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++;
    }
}

Permintaan untuk /counter di browser, sebagaimana ditentukan oleh direktif @page di bagian atas, menyebabkan komponen Counter merender kontennya. Petunjuk @rendermode memungkinkan perenderan server interaktif untuk komponen sehingga dapat menangani kejadian antarmuka pengguna dari browser.

Setiap kali tombol Klik saya dipilih:

  • Peristiwa onclick diaktifkan.
  • Metode IncrementCount digunakan.
  • currentCount ditingkatkan.
  • Komponen dirender untuk menampilkan jumlah yang diperbarui.