Udostępnij za pośrednictwem


Używanie kontrolki TextBoxWatermark z kontrolkami walidacji (VB)

Autor: Christian Wenz

Pobierz plik PDF

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

Moduł sprawdzania poprawności skarży się, że w polu nie ma tekstu (kliknij, aby wyświetlić obraz pełnowymiarowy)