Używanie kontrolki TextBoxWatermark z kontrolkami walidacji (VB)
Autor: Christian Wenz
Kontrolka TextBoxWatermark w zestawie narzędzi AJAX Control Toolkit rozszerza pole tekstowe, aby tekst był wyświetlany w polu. Gdy użytkownik kliknie pole, zostanie opróżniony. Jeśli użytkownik opuści pole bez wprowadzania tekstu, wstępnie wypełnionego tekstu pojawi się ponownie. Może to spowodować kolizję z kontrolkami weryfikacji ASP.NET na tej samej stronie, ale te problemy mogą zostać rozwiązane.
Omówienie
Kontrolka TextBoxWatermark
w zestawie narzędzi AJAX Control Toolkit rozszerza pole tekstowe, aby tekst był wyświetlany w polu. Gdy użytkownik kliknie pole, zostanie opróżniony. Jeśli użytkownik opuści pole bez wprowadzania tekstu, wstępnie wypełnionego tekstu pojawi się ponownie. Może to spowodować kolizję z kontrolkami weryfikacji ASP.NET na tej samej stronie, ale te problemy mogą zostać rozwiązane.
Kroki
Podstawowa konfiguracja próbki jest następująca: TextBox
kontrolka jest oznaczona znakiem wodnym za pomocą kontrolki TextBoxWatermarkExtender
. Przycisk wyzwala powrót i zostanie później użyty do wyzwolenia kontrolek weryfikacji na stronie. Ponadto do zainicjowania ASP.NET AJAX jest wymagana kontrolka ScriptManager
:
<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>
Teraz dodaj kontrolkę RequiredFieldValidator
, która sprawdza, czy w polu znajduje się tekst po przesłaniu formularza. Właściwość InitialValue
modułu sprawdzania poprawności musi być ustawiona na tę samą wartość, która jest używana w kontrolce: Po przesłaniu TextBoxWatermarkExtender
formularza wartość niezmienionego pola tekstowego jest wartością znaku wodnego w nim:
<asp:RequiredFieldValidator ID="rfv1" ControlToValidate="Name"
Text="*" InitialValue=" Your Name " Display="Dynamic" runat="server" />
Istnieje jednak jeden problem z tym podejściem: jeśli klient wyłączy język JavaScript, pole tekstowe nie jest wstępnie wypełnione tekstem znaku wodnego, dlatego RequiredFieldValidator
komunikat o błędzie nie jest wyzwalany. W związku z tym jest wymagana druga RequiredFieldValidator
kontrolka, która sprawdza puste pole tekstowe (pomijając InitialValue
atrybut).
<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="Name"
Text="*" Display="Dynamic" runat="server" />
Ponieważ oba moduły sprawdzania poprawności używają Display
="Dynamic"
metody , użytkownik końcowy nie może odróżnić wyglądu wizualizacji, który z dwóch modułów sprawdzania poprawności został wyzwolony. Zamiast tego wygląda na to, że był tylko jeden z nich.
Na koniec dodaj kod po stronie serwera, aby wyświetlić tekst w polu, jeśli żaden moduł sprawdzania poprawności nie wydał komunikatu o błędzie:
<script runat="server">
Protected Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs)
lbl.Text = HttpUtility.HtmlEncode(Name.Text)
End Sub
</script>
Moduł sprawdzania poprawności skarży się, że w polu nie ma tekstu (kliknij, aby wyświetlić obraz pełnowymiarowy)