Uso di TextBoxWatermark con i controlli di convalida (C#)

di Christian Wenz

Scaricare il PDF

Il controllo TextBoxWatermark in AJAX Control Toolkit estende una casella di testo in modo che un testo venga visualizzato all'interno della casella. Quando un utente fa clic nella casella, questa viene svuotata. Se l'utente lascia la casella senza immettere testo, viene nuovamente visualizzato il testo precompilato. Questo può interferire con i controlli di convalida ASP.NET nella stessa pagina, ma tali problemi possono essere superati.

Informazioni generali

Il TextBoxWatermark controllo in AJAX Control Toolkit estende una casella di testo in modo che un testo venga visualizzato all'interno della casella. Quando un utente fa clic nella casella, questa viene svuotata. Se l'utente lascia la casella senza immettere testo, viene nuovamente visualizzato il testo precompilato. Questo può entrare in conflitto con i controlli di convalida ASP.NET sulla stessa pagina, ma questi problemi possono essere risolti.

Gradi

La configurazione di base dell'esempio è la seguente: un TextBox controllo è filigranato usando un TextBoxWatermarkExtender controllo . Un pulsante attiva un postback e verrà usato successivamente per attivare i controlli di convalida nella pagina. Inoltre, è necessario un ScriptManager controllo per inizializzare 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>

Aggiungere ora un RequiredFieldValidator controllo che controlla se nel campo è presente testo quando viene inviato il modulo. La proprietà InitialValue del validator deve essere impostata allo stesso valore utilizzato nel controlloTextBoxWatermarkExtender: quando il form viene inviato, il valore di una casella di testo non modificata è il watermark al suo interno:

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

Tuttavia, esiste un problema con questo approccio: se il client disabilita JavaScript, il campo di testo non viene precompilato con il testo della filigrana, pertanto RequiredFieldValidator non attiva un messaggio di errore. Pertanto, è necessario un secondo RequiredFieldValidator controllo che controlla la presenza di una casella di testo vuota (omettendo l'attributo InitialValue ).

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

Poiché entrambi i validatori usano Display="Dynamic", l'utente finale non è in grado di distinguere dall'aspetto visivo quale dei due validatori è stato attivato; sembra che ce ne sia uno solo.

Aggiungere infine codice sul lato server per restituire il testo nel campo se nessun validator ha emesso un messaggio di errore:

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

Il validator segnala che non è presente alcun testo nel campo (fare clic per visualizzare l'immagine a dimensione intera)