Menggunakan TextBoxWatermark Dengan Kontrol Validasi (C#)

oleh Christian Wenz

Unduh PDF

Kontrol TextBoxWatermark di Kotak Alat Kontrol AJAX memperluas kotak teks sehingga teks ditampilkan di dalam kotak. Saat pengguna mengklik kotak, itu dikosongkan. Jika pengguna meninggalkan kotak tanpa memasukkan teks, teks yang telah diisi sebelumnya akan muncul kembali. Ini dapat bertabrakan dengan Kontrol Validasi ASP.NET pada halaman yang sama, tetapi masalah ini mungkin diatasi.

Gambaran Umum

TextBoxWatermark Kontrol di Kotak Alat Kontrol AJAX memperluas kotak teks sehingga teks ditampilkan di dalam kotak. Saat pengguna mengklik kotak, itu dikosongkan. Jika pengguna meninggalkan kotak tanpa memasukkan teks, teks yang telah diisi sebelumnya akan muncul kembali. Ini dapat bertabrakan dengan Kontrol Validasi ASP.NET pada halaman yang sama, tetapi masalah ini mungkin diatasi.

Langkah-langkah

Penyiapan dasar sampel adalah sebagai berikut: TextBox kontrol diberi marka air menggunakan TextBoxWatermarkExtender kontrol. Tombol memicu postback dan nantinya akan digunakan untuk memicu kontrol validasi di halaman. Selain itu, ScriptManager kontrol diperlukan untuk menginisialisasi ASP.NET AJAX:

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 <asp:TextBox ID="Name" runat="server" /> <br />
 <asp:Button ID="btn" runat="server" Text="Submit" OnClick="btn_Click" /><br />
 <asp:Label ID="lbl" runat="server" />
 </div>
 <ajaxToolkit:TextBoxWatermarkExtender ID="tbwe" runat="server"
 TargetControlID="Name" WatermarkText=" Your Name " />
</form>

Sekarang tambahkan RequiredFieldValidator kontrol yang memeriksa apakah ada teks di bidang saat formulir dikirimkan. InitialValue Properti validator harus diatur ke nilai yang sama yang digunakan dalam TextBoxWatermarkExtender kontrol: Saat formulir dikirimkan, nilai kotak teks yang tidak berubah adalah nilai marka air di dalamnya:

<asp:RequiredFieldValidator ID="rfv1" ControlToValidate="Name"
 Text="*" InitialValue=" Your Name " Display="Dynamic" runat="server" />

Namun ada satu masalah dengan pendekatan ini: Jika klien menonaktifkan JavaScript, bidang teks tidak diisi sebelumnya dengan teks marka air, oleh karena itu RequiredFieldValidator tidak memicu pesan kesalahan. Oleh karena itu, kontrol kedua RequiredFieldValidator diperlukan yang memeriksa kotak teks kosong (menghilangkan InitialValue atribut ).

<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="Name"
 Text="*" Display="Dynamic" runat="server" />

Karena kedua validator menggunakan Display="Dynamic", pengguna akhir tidak dapat membedakan dari tampilan visual mana dari dua validator yang ditembakkan; sebaliknya, sepertinya hanya ada salah satunya.

Terakhir, tambahkan beberapa kode sisi server untuk menghasilkan teks di bidang jika tidak ada validator yang mengeluarkan pesan kesalahan:

<script runat="server">
 protected void btn_Click(object sender, EventArgs e)
 {
 lbl.Text = HttpUtility.HtmlEncode(Name.Text);
 }
</script>

Validator mengeluh bahwa tidak ada teks di bidang (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya