Verwenden von TextBoxWatermark mit Validierungssteuerelementen (C#)

von Christian Wenz

PDF herunterladen

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

Überblick

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

Schritte

Die grundlegende Einrichtung des Beispiels ist wie folgt: Ein TextBox Steuerelement wird mithilfe eines Steuerelements mit Wasserzeichen TextBoxWatermarkExtender versehen. Eine Schaltfläche löst ein 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 beim Übermitteln des Formulars Text im Feld vorhanden ist. Die InitialValue Eigenschaft des Validierungsators muss auf denselben Wert festgelegt werden, der TextBoxWatermarkExtender im Steuerelement verwendet wird: Wenn das Formular übermittelt wird, ist der Wert eines unveränderten Textfelds der darin enthaltene Wasserzeichenwert:

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

Bei diesem Ansatz gibt es jedoch ein Problem: Wenn der Client JavaScript deaktiviert, wird das Textfeld nicht mit dem Wasserzeichentext vorgefüllt, sodass keine RequiredFieldValidator Fehlermeldung ausgelöst wird. Daher ist ein zweites RequiredFieldValidator Steuerelement erforderlich, das nach einem leeren Textfeld sucht (ohne das InitialValue Attribut).

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

Da beide Validierungsatoren verwenden Display="Dynamic", kann der Endbenutzer nicht von der visuellen Darstellung unterscheiden, welche der beiden Validierungsatoren ausgelöst wurde. Stattdessen sieht es so aus, als gäbe es nur einen von ihnen.

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

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

Der Validierungsgeber beschwert sich, dass im Feld kein Text vorhanden ist (Klicken Sie, um das Bild in voller Größe anzuzeigen).

ZurückWeiter