Utilisation de TextBoxWatermark avec des contrôles Validation (C#)

par Christian Wenz

Télécharger le PDF

Le contrôle TextBoxWatermark dans ajax Control Toolkit étend une zone de texte afin qu’un texte s’affiche dans la zone. Lorsqu’un utilisateur clique dans la zone, celle-ci est vidée. Si l’utilisateur quitte la zone sans entrer de texte, le texte prérempli réapparaît. Cela peut entrer en conflit avec ASP.NET contrôles de validation sur la même page, mais ces problèmes peuvent être résolus.

Vue d’ensemble

Le TextBoxWatermark contrôle dans ajax Control Toolkit étend une zone de texte afin qu’un texte s’affiche dans la zone. Lorsqu’un utilisateur clique dans la zone, celle-ci est vidée. Si l’utilisateur quitte la zone sans entrer de texte, le texte prérempli réapparaît. Cela peut entrer en conflit avec ASP.NET contrôles de validation sur la même page, mais ces problèmes peuvent être résolus.

Étapes

La configuration de base de l’exemple est la suivante : un TextBox contrôle est en filigrane à l’aide d’un TextBoxWatermarkExtender contrôle. Un bouton déclenche une publication et sera utilisé ultérieurement pour déclencher les contrôles de validation sur la page. En outre, un ScriptManager contrôle est requis pour initialiser ASP.NET AJAX :

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

Ajoutez maintenant un RequiredFieldValidator contrôle qui vérifie s’il y a du texte dans le champ lorsque le formulaire est envoyé. La InitialValue propriété du validateur doit être définie sur la même valeur que celle utilisée dans le TextBoxWatermarkExtender contrôle : lorsque le formulaire est envoyé, la valeur d’une zone de texte inchangée est la valeur de filigrane qu’elle contient :

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

Toutefois, il existe un problème avec cette approche : si le client désactive JavaScript, le champ de texte n’est pas prérempli avec le texte en filigrane. Par conséquent RequiredFieldValidator , ne déclenche pas de message d’erreur. Par conséquent, un deuxième RequiredFieldValidator contrôle est requis pour rechercher une zone de texte vide (en omettant l’attribut InitialValue ).

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

Étant donné que les deux validateurs utilisent Display="Dynamic", l’utilisateur final ne peut pas distinguer de l’apparence visuelle lequel des deux validateurs a été déclenché ; au lieu de cela, il semble qu’il n’y en ait eu qu’un seul.

Enfin, ajoutez du code côté serveur pour générer le texte dans le champ si aucun validateur n’a émis de message d’erreur :

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

Le validateur se plaint qu’il n’y a pas de texte dans le champ (Cliquer pour afficher l’image en taille réelle)

PrécédentSuivant