Data Binding dengan @bind — CompileDaily Study

Penjelasan

@bind menyinkronkan nilai input form dengan properti C# DUA ARAH — setara v-model di Vue atau [(ngModel)] di Angular. Secara default, @bind meng-update nilainya saat elemen kehilangan fokus (event onchange); untuk update per-ketikan (real-time), pakai @bind:event="oninput".

Contoh Konsep

<input @bind="nama" />
<p>Halo, @nama!</p>

<input @bind="nama" @bind:event="oninput" /> @* update tiap ketikan *@

@code {
    private string nama = "";
}

Praktikum

Buat properti email (string kosong) dan umur (int, awalnya 0). Bikin input untuk keduanya lewat @bind, lalu tampilkan ringkasan "Email: @email, Umur: @umur" di bawah kedua input.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

@bind OTOMATIS melakukan konversi tipe sesuai properti C#-nya (mis. @bind="umur" ke properti int otomatis parsing string input jadi angka) — beda dengan HTML input yang nilainya selalu string mentah, Blazor menangani konversi ini di baliknya.