Uso de TextBoxWatermark com controles de validação (C#)
por Christian Wenz
O controle TextBoxWatermark no Kit de Ferramentas de Controle AJAX estende uma caixa de texto para que um texto seja exibido dentro da caixa. Quando um usuário clica na caixa, ela é esvaziada. Se o usuário sair da caixa sem inserir texto, o texto pré-preenchido reaparecerá. Isso pode colidir com ASP.NET controles de validação na mesma página, mas esses problemas podem ser superados.
Visão geral
O TextBoxWatermark controle no Kit de Ferramentas de Controle AJAX estende uma caixa de texto para que um texto seja exibido dentro da caixa. Quando um usuário clica na caixa, ela é esvaziada. Se o usuário sair da caixa sem inserir texto, o texto pré-preenchido reaparecerá. Isso pode colidir com ASP.NET controles de validação na mesma página, mas esses problemas podem ser superados.
Etapas
A configuração básica do exemplo é a seguinte: um TextBox controle é marcado como marca d'água usando um TextBoxWatermarkExtender controle . Um botão dispara um postback e, posteriormente, será usado para disparar os controles de validação na página. Além disso, um ScriptManager controle é necessário para inicializar 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>
Agora, adicione um RequiredFieldValidator controle que verifica se há texto no campo quando o formulário é enviado. A InitialValue propriedade do validador deve ser definida com o mesmo valor usado no TextBoxWatermarkExtender controle: quando o formulário é enviado, o valor de uma caixa de texto inalterada é o valor da marca d'água dentro dele:
<asp:RequiredFieldValidator ID="rfv1" ControlToValidate="Name"
Text="*" InitialValue=" Your Name " Display="Dynamic" runat="server" />
No entanto, há um problema com essa abordagem: se o cliente desabilitar o JavaScript, o campo de texto não será preenchido previamente com o texto da marca d'água, portanto, o RequiredFieldValidator não disparará uma mensagem de erro. Portanto, é necessário um segundo RequiredFieldValidator controle que verifica se há uma caixa de texto vazia (omitindo o InitialValue atributo).
<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="Name"
Text="*" Display="Dynamic" runat="server" />
Como ambos os validadores usam Display="Dynamic", o usuário final não pode distinguir da aparência visual em que os dois validadores foram acionados; em vez disso, parece que havia apenas um deles.
Por fim, adicione algum código do lado do servidor para gerar o texto no campo se nenhum validador tiver emitido uma mensagem de erro:
<script runat="server">
protected void btn_Click(object sender, EventArgs e)
{
lbl.Text = HttpUtility.HtmlEncode(Name.Text);
}
</script>
O validador reclama que não há texto no campo (Clique para exibir a imagem em tamanho real)
