Cara Mendapatkan Variabel dari Input HTML di Blazor C#

Blazor adalah kerangka kerja yang kuat untuk membangun aplikasi web interaktif dengan C#, bukan JavaScript. Salah satu fitur inti Blazor adalah kemampuan untuk mengikat kode C# dengan elemen HTML, sehingga memudahkan untuk menangkap masukan pengguna dan menggunakannya dalam aplikasi Anda. Pada artikel ini, kita akan mempelajari cara mendapatkan variabel dari elemen input HTML di Blazor, baik di aplikasi Blazor Server maupun Blazor WebAssembly.

Pengantar Pengikatan Data Dua Arah Blazor

Blazor menawarkan fitur yang dikenal sebagai “pengikatan data dua arah,” yang memungkinkan perubahan pada antarmuka pengguna (UI) untuk secara otomatis memperbarui variabel C# yang mendasarinya, dan sebaliknya. Ini sangat berguna ketika Anda ingin mengambil data yang dimasukkan oleh pengguna ke dalam kolom input HTML dan segera mencerminkan perubahan tersebut dalam kode C# Anda.

Memulai

Untuk mendapatkan variabel dari kolom input HTML, Anda memerlukan beberapa komponen utama:

1. Input HTML : Bidang input tempat pengguna memasukkan data.
2. Variabel C# : Variabel C# yang menyimpan data dari input.
3. Pengikatan Data : Koneksi antara kolom input dan variabel C#, biasanya melalui arahan @bind di Blazor.

Di bagian berikut, kita akan membahas berbagai contoh untuk mendemonstrasikan cara kerjanya.

Contoh 1: Pengikatan Input Teks Sederhana

Cara paling sederhana untuk menangkap masukan pengguna adalah dengan menggunakan direktif @bind . Ini secara otomatis mengikat elemen input HTML ke variabel C#.

Contoh Kode (Komponen Pisau Cukur)

 @page "/input-example" <h3>Simple Input Binding in Blazor</h3> <label for="userName">Enter your name:</label> <input type="text" @bind="userName" /> <p>Hello, @userName!</p> @code { private string userName = string.Empty; }

Penjelasan:

1. Direktif @bind mengikat elemen input ke variabel userName di C#. Setiap kali pengguna mengetik di kolom input, variabel userName diperbarui secara otomatis.
2. Paragraf <p>Hello, @userName!</p> secara dinamis menampilkan nilai userName , menampilkan teks yang diperbarui secara real-time saat pengguna mengetik.

Dalam contoh ini, variabel userName diikat ke kolom input, dan pengikatan dua arah Blazor memastikan bahwa setiap kali pengguna memodifikasi teks, nilai userName diperbarui secara real-time.

Contoh 2: Mendapatkan dan Menggunakan Input pada Klik Tombol

Terkadang Anda perlu melakukan tindakan pada data yang dimasukkan oleh pengguna, seperti mengklik tombol untuk mengirimkan nilai atau memprosesnya lebih lanjut. Hal ini juga dapat dicapai dengan mudah di Blazor.

Contoh Kode (Komponen Pisau Cukur)

 @page "/submit-input" <h3>Submit Input in Blazor</h3> <label for="age">Enter your age:</label> <input type="number" @bind="age" /> <button @>Submit</button> <p>You entered: @age</p> @code { private int age; private void SubmitAge() { // Do something with the age variable (eg, validation, submission, etc.) Console.WriteLine($"User's age is {age}"); } }

Penjelasan:

1. Direktif @bind="age" mengikat kolom input ke variabel age .
2. @ mengikat peristiwa klik tombol ke metode SubmitAge .
3. Ketika pengguna mengklik tombol tersebut, metode SubmitAge dipanggil, yang mencetak usia yang dimasukkan ke konsol.

Dalam contoh ini, pengguna dapat memasukkan usia mereka, dan ketika mereka mengklik tombol “Kirim”, metode SubmitAge dipicu untuk melakukan tindakan dengan variabel age .

Contoh 3: Validasi Input

Blazor memungkinkan Anda melakukan validasi masukan dengan mudah dengan menggabungkan pengikatan data dengan komponen formulir seperti <EditForm> .

Contoh Kode (Komponen Pisau Cukur)

 @page "/validation-example" <h3>Input Validation in Blazor</h3> <EditForm Model="@person" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="firstName">First Name:</label> <InputText @bind-Value="person.FirstName" /> <ValidationMessage For="@(() => person.FirstName)" /> <button type="submit">Submit</button> </EditForm> <p>You entered: @person.FirstName</p> @code { private Person person = new Person(); private void HandleValidSubmit() { // Process the valid input Console.WriteLine($"First Name: {person.FirstName}"); } public class Person { [Required] public string FirstName { get; set; } } }

Penjelasan:

1. Komponen <EditForm> digunakan untuk menggabungkan kolom input dan melakukan validasi.
2. @bind-Value="person.FirstName" mengikat kolom input ke properti FirstName dari objek person .
3. Komponen DataAnnotationsValidator menggunakan anotasi data (seperti [Required] ) untuk memvalidasi input.
4. Jika input valid dan formulir dikirimkan, metode HandleValidSubmit dipanggil, yang memproses data.

Validasi:

• Jika pengguna tidak memberikan nama depan (karena anotasi [Required] ), pesan validasi akan muncul, dan formulir tidak akan dikirimkan sampai inputnya valid.

Pengikatan Tingkat Lanjut dengan Jenis Input Lain

Blazor mendukung berbagai jenis masukan, seperti kotak teks, kotak centang, tombol radio, dropdown, dll. Anda dapat mengikat variabel ke salah satu elemen ini dengan cara yang sama.

Contoh: Pengikatan Kotak Centang

 @page "/checkbox-example" <h3>Checkbox Binding in Blazor</h3> <label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" @bind="isSubscribed" /> <p>You are @(isSubscribed ? "subscribed" : "not subscribed") to the newsletter.</p> @code { private bool isSubscribed = false; }

Dalam contoh ini, kotak centang terikat ke variabel isSubscribed , dan ketika pengguna mencentang atau menghapus centang pada kotak tersebut, nilai isSubscribed secara otomatis diperbarui.

Kesimpulan

Mendapatkan variabel dari input HTML di Blazor mudah dan efisien, berkat pengikatan data dua arah Blazor yang kuat. Dengan menggunakan direktif @bind , Anda dapat dengan cepat menautkan kolom input ke variabel C#, memastikan bahwa perubahan di UI tercermin dalam kode Anda dan sebaliknya.

Baik Anda membuat formulir sederhana atau logika validasi masukan yang kompleks, kemampuan pengikatan data Blazor menyederhanakan proses bekerja dengan masukan pengguna. Dari kotak teks hingga kotak centang, Blazor menangani integrasi antara HTML dan C# dengan mulus, menjadikannya pilihan tepat untuk membangun aplikasi web interaktif.