Uso di TextBoxWatermark con i controlli di convalida (VB)

di Christian Wenz

Scarica il PDF

Il controllo TextBoxWatermark nel Toolkit di controllo AJAX estende una casella di testo in modo che un testo venga visualizzato 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. Ciò può verificarsi con ASP.NET controlli di convalida nella stessa pagina, ma questi problemi potrebbero essere superati.

Panoramica

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, viene svuotato. Se l'utente lascia la casella senza immettere testo, il testo precompilato viene visualizzato nuovamente. Ciò può verificarsi con ASP.NET controlli di convalida nella stessa pagina, ma questi problemi potrebbero 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 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 verifica se nel campo è presente testo quando viene inviato il modulo. La InitialValue proprietà del validator deve essere impostata sullo stesso valore usato nel TextBoxWatermarkExtender controllo: quando il modulo viene inviato, il valore di una casella di testo non modificata è il valore della filigrana all'interno del controllo:

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

Tuttavia, si verifica un problema con questo approccio: se il client disabilita JavaScript, il campo di testo non viene riempito con il testo della filigrana, pertanto non RequiredFieldValidator attiva un messaggio di errore. Pertanto, è necessario un secondo RequiredFieldValidator controllo che controlla 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 dei due validator è stato attivato. Sembra che vi fosse solo uno di essi.

Infine, aggiungere un codice lato server per restituire il testo nel campo se nessun validator ha generato un messaggio di errore:

<script runat="server">
 Protected Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs)
 lbl.Text = HttpUtility.HtmlEncode(Name.Text)
 End Sub
</script>

Il validator si lamenta che non esiste testo nel campo (Fare clic per visualizzare l'immagine a dimensioni complete)

Indietro