Verwenden von TextBoxWatermark mit Validierungssteuerelementen (C#)

von Christian Wenz

PDF herunterladen

Das TextBoxWatermark-Steuerelement im AJAX Control Toolkit erweitert ein Textfeld, sodass ein Text im Feld angezeigt wird. Wenn ein Benutzer in das Feld klickt, wird er geleert. Wenn der Benutzer das Feld verlässt, ohne Text einzugeben, wird der ausgefüllte Text wieder angezeigt. Dies kann mit ASP.NET Überprüfungssteuerelementen auf derselben Seite kollidieren, aber diese Probleme können behoben werden.

Übersicht

Das TextBoxWatermark Steuerelement im AJAX Control Toolkit erweitert ein Textfeld, sodass ein Text innerhalb des Felds angezeigt wird. Wenn ein Benutzer in das Feld klickt, wird er geleert. Wenn der Benutzer das Feld verlässt, ohne Text einzugeben, wird der ausgefüllte Text wieder angezeigt. Dies kann mit ASP.NET-Validierungssteuerelementen auf derselben Seite kollidieren, aber diese Probleme können überwunden werden.

Schritte

Die grundlegende Einrichtung des Beispiels ist folgendes: Ein TextBox Steuerelement wird mit einem TextBoxWatermarkExtender Steuerelement wasserzeicheniert. Eine Schaltfläche löst einen Postback aus und wird später verwendet, um die Validierungssteuerelemente auf der Seite auszulösen. Außerdem ist ein ScriptManager Steuerelement erforderlich, um ASP.NET AJAX zu initialisieren:

<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>

Fügen Sie nun ein RequiredFieldValidator Steuerelement hinzu, das überprüft, ob text im Feld vorhanden ist, wenn das Formular gesendet wird. Die InitialValue Eigenschaft des Validators muss auf denselben Wert festgelegt werden, der im TextBoxWatermarkExtender Steuerelement verwendet wird: Wenn das Formular übermittelt wird, ist der Wert eines unveränderten Textfelds der Wasserzeichenwert darin enthalten.

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

Es gibt jedoch ein Problem mit diesem Ansatz: Wenn der Client JavaScript deaktiviert, wird das Textfeld nicht mit dem Wasserzeichentext ausgefüllt, daher löst die RequiredFieldValidator Fehlermeldung nicht aus. Daher ist ein zweites RequiredFieldValidator Steuerelement erforderlich, das auf ein leeres Textfeld überprüft (ohne das InitialValue Attribut).

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

Da beide Validatoren Display="Dynamic" verwenden, kann der Endbenutzer nicht anhand der visuellen Darstellung erkennen, welcher der beiden Validatoren ausgelöst wurde; stattdessen sieht es so aus, als ob es nur einen von ihnen gäbe.

Fügen Sie schließlich einen serverseitigen Code hinzu, um den Text im Feld auszugeben, wenn kein Validator eine Fehlermeldung ausgegeben hat:

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

Der Validator beklagt, dass kein Text im Feld vorhanden ist (Klicken Sie, um das Bild in voller Größe anzuzeigen)