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

di Christian Wenz

Scarica il PDF

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

Panoramica

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

Passaggi

La configurazione di base dell'esempio è la seguente: un TextBox controllo viene filigranato usando un TextBoxWatermarkExtender controllo . Un pulsante attiva un postback e successivamente verrà usato 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 InitialValue proprietà del validator deve essere impostata sullo stesso valore utilizzato nel TextBoxWatermarkExtender controllo: quando la maschera viene inviata, il valore di una casella di testo non modificato è il valore limite al suo interno:

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

Esiste tuttavia 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 validator usano Display="Dynamic", l'utente finale non può distinguere dall'aspetto visivo che i due validator sono stati attivati, ma sembra che ne sia presente solo uno.

Aggiungere infine codice lato server per restituire il testo nel campo se nessun validator ha generato 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 testo nel campo (fare clic per visualizzare l'immagine a dimensione intera)

IndietroAvanti