Kontrol ASP.NET: PeriksaBox, Tombol Radio, DaftarBox

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 beberapa properti umumnya.

Dalam contoh kita, kita akan membuat satu formulir yang memiliki fungsi berikut.

1. Kemampuan bagi pengguna untuk memasukkan namanya.
2. Opsi untuk memilih kota tempat tinggal pengguna.
3. Kemampuan bagi pengguna untuk memasukkan opsi gender.
4. 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 Designer:

• Klik kanan file Demo.aspx di Penjelajah Solusi, lalu
• 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 lain. Contoh umum adalah ketika label ditambahkan bersama dengan kontrol kotak teks. Label memberikan indikasi kepada pengguna tentang apa yang diharapkan untuk diisi di dalam kotak teks. Mari kita lihat bagaimana kita dapat mengimplementasikannya 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.

1. Buka jendela properti dengan mengklik kanan pada kontrol label.
2. Pilih opsi menu Properti.

Langkah 3) Dari jendela properti, ubah nilai 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 melakukan perubahan di atas, Anda akan melihat hasil sebagai 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 peralatan seperti yang ditunjukkan di bawah ini.

Berikut tampilan kontrol Textbox di perancang formulir setelah ditempatkan pada formulir.

Langkah 2) Setelah Kotak Teks ditambahkan, Anda harus mengubah properti ID.

• Buka jendela properti dengan mengklik kanan kontrol Kotak Teks, dan
• Pilih Properti, lalu
• Ubah properti ID dari 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 listbox ke formulir, menu samping 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.

1. Klik tombol Tambah untuk menambahkan item daftar.
2. Berikan nama untuk nilai teks dari item daftar – dalam kasus kita, Mumbai. Ulangi langkah 1 dan 2 untuk menambahkan item daftar untuk Mangalore dan Hyderabad.
3. Klik pada tombol OK.

Langkah 4) Buka jendela properti dan ubah nilai properti ID kontrol menjadi lstLocation.

Setelah Anda melakukan perubahan di atas, Anda akan melihat hasil sebagai berikut.

Keluaran:-

Dari outputnya, Anda dapat dengan jelas melihat bahwa Listbox 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 pilihan '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 'Perempuan'.
• Juga, ubah properti ID dari masing-masing kontrol menjadi rdMale dan rdFemale.

Setelah Anda melakukan perubahan di atas, Anda akan melihat hasil sebagai berikut.

Keluaran:-

Dari hasil output, Anda dapat dengan jelas melihat bahwa tombol radio telah ditambahkan ke formulir.

kotak centang

Kotak centang digunakan untuk menyediakan daftar pilihan di mana pengguna dapat memilih beberapa opsi. Mari kita lihat bagaimana kita dapat mengimplementasikannya dengan contoh yang ditunjukkan di bawah ini. Kita akan menambahkan 2 kotak centang ke Formulir Web kita. Kotak centang ini akan memberikan pilihan kepada pengguna apakah mereka ingin belajar C# atau ASP.Net.

Langkah 1) Langkah pertama adalah menyeret kontrol kotak centang ke Formulir Web dari kotak peralatan seperti yang ditunjukkan di bawah ini.

Langkah 2) Setelah kotak centang ditambahkan, ubah properti ID kotak centang tersebut.

• 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'.

1. Ubah properti ID dari kotak centang menjadi 'chkASP'.

2. Ubah properti ID dari kotak centang menjadi chkC.

Setelah Anda melakukan perubahan di atas, Anda akan melihat hasil sebagai berikut.

Keluaran:-

Dari hasil 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. Kita akan menambahkan tombol sederhana yang disebut tombol 'Kirim'. Tombol ini akan digunakan untuk mengirimkan semua informasi pada formulir.

Langkah 1) Langkah pertama adalah menyeret kontrol tombol ke Formulir Web dari kotak peralatan 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 melakukan perubahan di atas, Anda akan melihat hasil sebagai 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.

Event btnSubmit_Click ditambahkan secara otomatis oleh Visual Studio ketika Anda mengklik dua kali tombol di perancang 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;
}

Code Penjelasan:-

1. Baris kode di atas melakukan hal yang paling sederhana. Kode tersebut mengambil nilai dari kontrol kotak teks Nama dan mengirimkannya ke klien melalui objek Respons. Jadi, jika Anda ingin memasukkan string “GuruJika angka 99 dimasukkan ke dalam kotak teks nama, nilai txtName.Text akan menjadi 'Guru99'.
2. Baris kode berikutnya mengambil nilai yang dipilih dari listbox melalui properti 'lstLocation.SelectedItem.Text'. Kemudian, nilai ini ditulis kembali ke klien melalui metode Response.Write.
3. Terakhir, kita membuat semua kontrol pada formulir menjadi tidak terlihat. Jika tidak, semua kontrol beserta nilai respons akan ditampilkan bersamaan. Biasanya, ketika seseorang memasukkan semua informasi pada formulir seperti Nama, lokasi, Jenis Kelamin, dll., halaman berikutnya yang ditampilkan kepada pengguna seharusnya hanya berisi informasi yang belum dimasukkan. Pengguna tidak ingin melihat kontrol Nama, Jenis Kelamin, dan lokasi lagi. Namun, ASP.Net tidak mengetahui hal ini, dan karenanya, secara default, ia akan menampilkan kembali semua kontrol ketika pengguna mengklik tombol Kirim. Oleh karena itu, kita perlu menulis kode untuk memastikan semua kontrol disembunyikan sehingga pengguna hanya melihat output yang diinginkan.

Setelah Anda melakukan perubahan di atas, Anda akan melihat hasil sebagai berikut.

Keluaran:-

Pada layar Output, lakukan langkah-langkah berikut:

1. Sebutkan nama dari GuruMasukkan angka 99 di kotak teks nama.
2. Pilih lokasi di kotak daftar Bangalore.
3. Klik tombol Kirim.

Setelah Anda melakukan ini, Anda akan melihat 'Guru99' dan lokasi 'Bangalore' ditampilkan di halaman tersebut.

Pertanyaan Umum Demo Slot