Używanie kontrolki TextBoxWatermark z kontrolkami walidacji (C#)

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łniony tekst 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łniony tekst 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: kontrolka TextBox jest oznaczona znakiem wodnym za pomocą kontrolki TextBoxWatermarkExtender . Przycisk wyzwala ogłaszanie zwrotne i będzie później używany do wyzwalania kontrolek walidacji na stronie. Ponadto do zainicjowania ASP.NET AJAX jest wymagana ScriptManager kontrolka:

<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ę sprawdzającą RequiredFieldValidator , czy w polu znajduje się tekst po przesłaniu formularza. InitialValue Właściwość modułu sprawdzania poprawności musi być ustawiona na tę samą wartość, która jest używana w kontrolceTextBoxWatermarkExtender: Po przesłaniu formularza wartość niezmienionego pola tekstowego jest wartością limitu 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łniane tekstem znaku wodnego, dlatego RequiredFieldValidator komunikat o błędzie nie jest wyzwalany. W związku z tym wymagana jest druga RequiredFieldValidator kontrolka, która sprawdza puste pole tekstowe (pomija atrybut InitialValue ).

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

Ponieważ oba moduły sprawdzania poprawności używają elementu Display="Dynamic", 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 moduł sprawdzania poprawności nie wydał komunikatu o błędzie:

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

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

WsteczDalej