Kontrol ASP.NET: PeriksaBox, Tombol Radio, DaftarBox, Kotak Teks, Label
Yakub Lee
Menambahkan Kontrol ASP.Net ke Formulir Web
ASP.Net memiliki kemampuan untuk menambahkan kontrol ke formulir seperti kotak teks dan label.
Mari kita lihat kontrol lain yang tersedia untuk formulir Web dan melihat beberapa properti umumnya.
Dalam contoh kita, kita akan membuat satu formulir yang memiliki fungsi berikut.
- Kemampuan bagi pengguna untuk memasukkan namanya.
- Opsi untuk memilih kota tempat tinggal pengguna
- Kemampuan bagi pengguna untuk memasukkan opsi gender.
- Opsi untuk memilih kursus yang ingin dipelajari pengguna. Akan ada pilihan untuk keduanya C# dan ASP.Net
Mari kita lihat setiap kontrol secara detail. Mari tambahkan mereka untuk membuat formulir dengan fungsi yang disebutkan di atas.
Langkah 1) Langkah pertama adalah membuka Forms Designer untuk formulir web Demo. Setelah Anda melakukan ini, Anda akan dapat menyeret kontrol dari kotak peralatan ke formulir web.
Untuk membuka formulir web Desainer,
- Klik kanan file Demo.aspx di Solution Explorer dan
- Pilih opsi menu Lihat Desainer.
Setelah Anda melakukan langkah di atas, Anda akan dapat melihat Perancang Formulir Anda seperti yang ditunjukkan di bawah ini.
Sekarang mari kita mulai menambahkan kontrol kita satu per satu
Kontrol Label
Kontrol label digunakan untuk menampilkan teks atau pesan kepada pengguna pada formulir. Kontrol label biasanya digunakan bersama dengan kontrol lainnya. Contoh umum adalah saat label ditambahkan bersama dengan kontrol kotak teks. Label memberikan indikasi kepada pengguna tentang apa yang diharapkan untuk diisi dalam kotak teks. Mari kita lihat bagaimana kita dapat menerapkannya dengan contoh yang ditunjukkan di bawah ini. Kita akan menggunakan label yang disebut 'nama'. Ini akan digunakan bersama dengan kontrol kotak teks, yang akan ditambahkan di bagian selanjutnya.
Langkah 1) Langkah pertama adalah menyeret kontrol 'label' ke Formulir Web dari kotak peralatan seperti yang ditunjukkan di bawah ini.
Langkah 2) Setelah label ditambahkan, ikuti langkah-langkah berikut.
- Buka jendela properti dengan mengklik kanan pada kontrol label
- Pilih opsi menu Properti
Langkah 3) Dari jendela properti, ubah nama properti Teks menjadi Nama
Demikian pula, ubah juga nilai properti ID kontrol menjadi lblName. Dengan menentukan ID yang berarti pada kontrol, akan lebih mudah untuk mengaksesnya selama fase pengkodean. Ini ditunjukkan di bawah.
Setelah Anda membuat perubahan di atas, Anda akan melihat output berikut
Keluaran:-
Anda akan melihat label Nama muncul di Formulir Web.
Kolom tulisan
Kotak teks digunakan untuk memungkinkan pengguna memasukkan beberapa teks pada aplikasi formulir Web. Mari kita lihat bagaimana kita dapat menerapkannya dengan contoh yang ditunjukkan di bawah ini. Kita akan menambahkan satu kotak teks ke formulir tempat pengguna dapat memasukkan namanya.
Langkah 1) Langkah pertama adalah menyeret kontrol kotak teks ke Formulir Web dari kotak alat seperti yang ditunjukkan di bawah ini
Berikut ini adalah tampilannya di desainer formulir setelah kontrol Kotak Teks ada di formulir
Langkah 2) Setelah Kotak Teks ditambahkan, Anda harus mengubah properti ID.
- Buka jendela properti dengan mengklik kanan pada kontrol Kotak Teks dan
- Pilih properti lalu
- Ubah properti id kotak teks menjadi txtName.
Setelah Anda membuat perubahan di atas, Anda akan melihat output berikut.
Keluaran:-
Kotak daftar
Kotak Daftar digunakan untuk menampilkan daftar item pada formulir Web. Mari kita lihat bagaimana kita dapat menerapkannya dengan contoh yang ditunjukkan di bawah ini. Kita akan menambahkan kotak daftar ke formulir untuk menyimpan beberapa lokasi kota.
Langkah 1) Langkah pertama adalah menyeret kontrol kotak daftar ke Formulir Web dari kotak peralatan seperti yang ditunjukkan di bawah ini
Langkah 2) Setelah Anda menyeret kotak daftar ke formulir, menu samping yang terpisah akan muncul. Di menu ini, pilih menu 'Edit Item'.
Langkah 3) Anda sekarang akan disajikan dengan kotak dialog di mana Anda dapat menambahkan item daftar ke kotak daftar.
- Klik tombol Tambah untuk menambahkan item daftar.
- Berikan nama untuk nilai teks item daftar – Dalam kasus kami Mumbai. Ulangi langkah 1 dan 2 untuk menambahkan item daftar untuk Mangalore dan Hyderabad.
- Klik tombol OK
Langkah 4) Buka jendela properti dan ubah nilai properti ID kontrol menjadi Lokasi pertama.
Setelah Anda membuat perubahan di atas, Anda akan melihat output berikut
Keluaran:-
Dari output, Anda dapat melihat dengan jelas bahwa Listboxes telah ditambahkan ke formulir.
Tombol radio
Tombol Radio digunakan untuk menampilkan daftar item yang dapat dipilih pengguna. Mari kita lihat bagaimana kita dapat menerapkannya dengan contoh di bawah ini. Kami akan menambahkan tombol radio untuk opsi pria/wanita.
Langkah 1) Langkah pertama adalah menyeret kontrol 'radiobutton' ke Formulir Web dari kotak peralatan. (lihat gambar di bawah). Pastikan untuk menambahkan 2 tombol radio, satu untuk opsi 'Pria' dan yang lainnya untuk 'Wanita'.
Langkah 2) Setelah Radiobutton ditambahkan, ubah properti 'teks'.
- Buka jendela properti dengan mengklik 'Kontrol tombol radio'.
- Ubah properti teks tombol Radio menjadi 'Pria'.
- Ulangi langkah yang sama untuk mengubahnya menjadi 'Wanita'.
- Juga, ubah properti ID dari masing-masing kontrol menjadi rdMale dan rdFemale.
Setelah Anda membuat perubahan di atas, Anda akan melihat output berikut
Keluaran:-
Dari outputnya, Anda dapat melihat dengan jelas bahwa tombol radio telah ditambahkan ke formulir
kotak centang
Kotak centang digunakan untuk menyediakan daftar opsi yang memungkinkan pengguna memilih beberapa pilihan. Mari kita lihat bagaimana kita dapat menerapkannya dengan contoh yang ditunjukkan di bawah ini. Kita akan menambahkan 2 kotak centang ke formulir Web kita. Kotak centang ini akan memberikan opsi kepada pengguna apakah mereka ingin mempelajari C# atau ASP.Net.
Langkah 1) Langkah pertama adalah menyeret kontrol kotak centang ke Formulir Web dari kotak alat seperti yang ditunjukkan di bawah ini
Langkah 2) Setelah Kotak Centang ditambahkan, ubah properti id kotak centang menjadi 'chkASP'.
- Buka jendela properti dengan mengklik kontrol Kotak Centang.
- Ubah properti ID dari masing-masing kontrol menjadi 'chkC' dan 'chkASP'.
Ubah juga properti teks dari kontrol Checkbox menjadi 'C#'. Lakukan hal yang sama untuk kontrol Checkbox lainnya dan ubah menjadi 'ASP.Net'.
- Ubah properti ID kotak centang menjadi 'chkASP'
- Ubah properti ID kotak centang menjadi chkC
Setelah Anda membuat perubahan di atas, Anda akan melihat output berikut
Keluaran:-
Dari output, Anda dapat melihat dengan jelas bahwa Kotak Centang telah ditambahkan ke formulir.
Tombol
Tombol digunakan untuk memungkinkan pengguna mengklik tombol yang kemudian akan memulai pemrosesan formulir. Mari kita lihat bagaimana kita dapat mengimplementasikannya dengan contoh kita saat ini seperti yang ditunjukkan di bawah ini. Kami akan menambahkan tombol sederhana yang disebut tombol 'Kirim'. Ini akan digunakan untuk mengirimkan semua informasi pada formulir.
Langkah 1) Langkah pertama adalah menyeret kontrol tombol ke Formulir Web dari kotak alat seperti yang ditunjukkan di bawah ini
Langkah 2) Setelah tombol ditambahkan, buka jendela properti dengan mengklik tombol kontrol. Ubah properti teks dari kontrol tombol menjadi Kirim. Juga, ubah properti ID tombol menjadi 'btnSubmit'.
Setelah Anda membuat perubahan di atas, Anda akan melihat output berikut
Keluaran:-
Dari output, Anda dapat melihat dengan jelas bahwa tombol telah ditambahkan ke formulir.
Penangan Acara di ASP.Net
Saat bekerja dengan formulir web, Anda bisa menambahkan acara ke kontrol. Peristiwa adalah sesuatu yang terjadi ketika suatu tindakan dilakukan. Mungkin tindakan yang paling umum adalah mengklik tombol pada formulir.
Di formulir web, Anda bisa menambahkan kode ke file aspx.cs yang sesuai. Kode ini dapat digunakan untuk melakukan tindakan tertentu ketika tombol pada form ditekan. Ini umumnya merupakan kejadian paling umum di Formulir Web. Mari kita lihat bagaimana kita bisa mencapainya.
Kami akan membuat ini sederhana. Cukup tambahkan acara ke kontrol tombol untuk menampilkan nama yang dimasukkan oleh pengguna. Mari ikuti langkah-langkah di bawah ini untuk mencapainya.
Langkah 1) Pertama, Anda harus mengklik dua kali Tombol pada Formulir Web. Ini akan memunculkan kode acara untuk tombol tersebut di Visual Studio.
Peristiwa btnSubmit_Click secara otomatis ditambahkan oleh Visual Studio saat Anda mengklik dua kali tombol di desainer formulir web.
Langkah 2) Sekarang mari tambahkan kode ke acara kirim untuk menampilkan nilai kotak teks nama dan lokasi yang dipilih oleh pengguna.
protected void btnSubmit_Click(object sender,EventArgs e)
{
Response.Write(txtName.Text + "</br>");
Response.Write(lstLocation.SelectedItem.Text + "</br>");
lblName.Visible = false;
txtName.Visible = false;
lstLocation.Visible = false;
chkC.Visible = false;
chkASP.Visible = false;
rdFemale.Visible = false;
btnSubmit.Visible = false;
}
Penjelasan Kode: -
- Baris kode di atas melakukan hal yang paling sederhana. Kode ini mengambil nilai dari kontrol kotak teks Nama dan mengirimkannya ke klien melalui objek Respons. Jadi jika Anda ingin memasukkan string “Guru99” di kotak teks nama, nilai txtName. Teks akan menjadi 'Guru99'.
- Baris kode berikutnya mengambil nilai yang dipilih dari listbox melalui properti 'lstLocation.SelectedItem.text'. Kemudian, ia menulis nilai ini melalui metode Response.Write kembali ke klien.
- Terakhir, kita membuat semua kontrol pada form menjadi tidak terlihat. Jika kita tidak melakukan ini, semua kontrol ditambah nilai respons kita akan ditampilkan bersama. Biasanya, ketika seseorang memasukkan semua informasi pada formulir seperti Nama, lokasi, Jenis Kelamin, dll. Halaman berikutnya ditampilkan kepada pengguna seharusnya hanya memiliki informasi yang tidak dimasukkan. Pengguna tidak ingin melihat kontrol Nama, Jenis Kelamin, lokasi lagi. Namun ASP.Net tidak mengetahui hal ini, dan karenanya, secara default, ASP.Net akan menampilkan semua kontrol lagi ketika pengguna mengklik tombol Kirim. Oleh karena itu, kita perlu menulis kode untuk memastikan semua kontrol disembunyikan sehingga pengguna hanya melihat keluaran yang diinginkan.
Setelah Anda membuat perubahan di atas, Anda akan melihat output berikut
Keluaran:-
Pada layar Output, lakukan langkah-langkah berikut
- Berikan nama Guru99 di kotak teks nama
- Pilih lokasi di kotak daftar Bangalore
- Klik pada tombol Kirim
Setelah Anda melakukan ini, Anda akan melihat 'Guru99' dan lokasi 'Bangalore' ditampilkan di halaman.
Kesimpulan
- In ASP.Net, Anda dapat menambahkan kontrol standar ke formulir seperti label, kotak teks, kotak daftar, dsb.
- Setiap kontrol dapat memiliki peristiwa yang terkait dengannya. Peristiwa yang paling umum adalah peristiwa klik tombol. Ini digunakan ketika informasi perlu dikirimkan ke server web.
