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

Windows Linux macOS

Ubah komponen

Parameter komponen ditentukan menggunakan atribut atau konten anak, yang memungkinkan Anda mengatur properti pada komponen anak. Tentukan parameter pada komponen Counter untuk menentukan berapa banyak yang bertambah dengan setiap klik tombol:

  • Tambahkan properti publik untuk IncrementAmount dengan atribut [Parameter].
  • Ubah metode IncrementCount untuk menggunakan IncrementAmount saat menaikkan nilai currentCount.

Kode berikut ini memperlihatkan cara mencapainya. Garis yang disorot memperlihatkan perubahan.

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;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

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

Di Home.razor, perbarui elemen <Counter> untuk menambahkan atribut IncrementAmount yang mengubah jumlah kenaikan menjadi sepuluh seperti yang ditunjukkan oleh yang disorot baris dalam kode berikut:

Components/Pages/Home.razor
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Terapkan perubahan ke aplikasi dengan mengeklik tombol Hot Reload. Komponen Home kini memiliki penghitung sendiri yang bertambah sebanyak sepuluh setiap kali tombol Klik saya dipilih, seperti yang ditunjukkan pada gambar berikut. Komponen Counter (Counter.razor) di /counter terus bertambah sebanyak satu.

Komponen Home kini memiliki penghitung sendiri yang bertambah sebanyak sepuluh setiap kali tombol Klik saya dipilih, seperti yang ditunjukkan pada gambar berikut. Komponen Counter (Counter.razor) di /counter terus bertambah sebanyak satu.

Laman kini berisi Penghitung yang bertambah 10 menampilkan penghitung di angka 40.