A introdução do AJAX Control toolkit abriu muitas possibilidades interessantes para desenvolvimento de interfaces de usuário mais ricas em ASP.NET. Adicione a isso uma IDE maravilhosa como o Visual Studio, e obtemos resultados estonteantes, sem muito esforço.
Callouts para cada validator
Modal exibindo os erros ao clicar no botão
Neste artigo, veremos como melhorar as validações client-side usando o AJAX Control Toolkit. Abaixo estão screen shots do que nós estamos tentando conseguir. O propósito disto é melhorar a experiência do usuário com muito pouco trabalho.
Criando um form simples
Usando o Visual Studio (ou o Visual Web Developer) crie um novo “ASP.NET Web Application“ (File>>New>> Project>>Visual C#>>Web>>ASP.NET Web Application). Eu criei um simples formulário, como esse abaixo:
Um formulário ASP.NET simples.
Como podemos ver, ele se parece com qualquer outro formulário em ASP.NET. Ele tem alguns textboxes, e labels correspondentes. Eu adicionei alguns validators para cada textbox. Name e email são obrigatórios, definidos pelo “RequiredFieldValidator”. A idade deve estar entre 18 e 100, garantida pelo “RangeValidator”. Existem “RegularExpressionValidator”s para email, e podemos usar validators feitos por nós mesmos para definir o CEP. E por último, um botão “Submit”, ou seja: Uma página ASP.NET simples.
Adicionando os callouts dos validadores
Primeiro, colocamos um controle “ValidationSummary” na página. Agora, todos os nossos erros serão exibidos em um único lugar. Isto será útil para implementar a janela modal na próxima sessão. Note que coloquei a propriedade “Text” dos validators para “*”, pois desejamos que as verdadeiras mensagens de erro sejam exibidos no validation summary.
Os callouts são efetuados usando o “ValidatorCalloutExtender” do AJAX Control Toolkit. Arraste um “ValidatorCalloutExtender” do toolbox para a tela. Defina o “TargetControlID” deste extender para o ID do nosso validator. Coloquei cinco validators na minha página, então utilizei o mesmo número de controles “ValidatorCalloutExtender”, um para cada validator. Modifique o “TargetControlID” de cada extender para que aponte para um validator.
Depois de adicionar o validation summary e o ValidatorCalloutExtenders
Por incrível que pareça, isso é tudo o que precisamos para fazer callouts com um efeito bonito. Execute sua página e clique no botão “Submit” sem digitar nada nas textboxes. Você verá essas callouts. Tente digitar informações erradas em qualquer uma das textboxes, um callout aparecerá perto dele, exibindo a mensagem de erro da validação que falhou.
Criando a janela modal (E desabilitando o background!)
A melhor parte do nosso modal é que ele desabilita a janela completamente. Ela adiciona uma camada translucida sobre o background, deixando a tela limpa. Novamente, o AJAX Control Toolkit vem para nos auxiliar. O “ModalPopupExtender” é perfeito para isso.Arraste um controle desse tipo para a tela. Depois disso, criamos uma DIV que vai agir como popup para nós, conforme o código abaixo:
<ajaxToolkit:ModalPopupExtender ID=”ModalExtnd1″
runat=”server” TargetControlID=”lblHidden”
PopupControlID=”SummaryDiv” BackgroundCssClass=”popupbg” >
</ajaxToolkit:ModalPopupExtender>
<div id=”SummaryDiv” class=”popupdiv”>
<table width=”100%” style=”font-family: “Trebuchet MS”, Tahoma, Verdana”>
<tr><td bgcolor=”skyblue”>
Errors on this page !
</td></tr>
<tr><td>
<asp:ValidationSummary id=”ValSum1″ runat=”server” Font-Names=”Arail”>
</asp:ValidationSummary>
</td></tr>
<tr><td align=”center”>
<input type=”button” value=”OK” onclick=”$find(“ModalExtnd1”).hide();”/>
</td></tr>
</table>
</div>
<asp:Label ID=”lblHidden” runat=”server” Text=”hidden” CssClass=”hidelbl”>
</asp:Label>
Nós definimos a propriedade “PopupControlID” do “ ModalPopupExtender”, para que aponte para “SummaryDiv”, o id da <div> recém criada. A propriedade “TargetControlID” do ModalPopupExtender, precisa ser definida. No nosso caso nós iremos definí-la apontando para um label escondido. Faremos isto por que queremos suprimir a funcionalidade “show/hide” deste extender. Nossa <div> consiste em um botão HTML, no qual a janela modal é escondida quando clicamos. Note também que movemos o validation summary para dentro da nossa <div>.
Form depois da adição do ModalPopupExtender e da
Vejamos agora o CSS para o nosso exemplo:
<style type=”text/css”>
.popupdiv{background-color:ivory;border:solid 1px skyblue;width:250px;display:block}
.popupbg{background-color:gray; filter: alpha(opacity=60); opacity:0.60}
.hidelbl{display:none;}
</style>
Existem três classes definidas aqui. A classe “popupbg” está atribuída à propriedade “BackgroundCssClass” do ModalPopupExtender. Perceba que definimos no código a opacidade do background na janela modal.
Agora, um pouco de javascript. Esta página contém uma função de javascript que é chamada para exibir ou esconder a janela modal, no evento “OnClick” do botão”submit”. Esta função deve ser inteligente o suficiente para exibir a janela modal somente em caso de falha da validação:
<script type=”text/javascript”>
function ShowModalDialog()
{var x= $find(”ModalExtnd1″);
Page_ClientValidate();
if(!Page_IsValid)
x.show();
}
function init()
{document.getElementById(“SummaryDiv”).style.display=“none”;}
</script>
Aqui nós utilizamos a API de validação client-side do “ASP.NET”. Uma chamada ao “Page_ClientValidate” ativa todos os validators. Se algo falhar, a variável global do javascript “Page_IsValid” é definida como falsa. Agora para exibir ou esconder a janela modal dialog box, anexaremos um handler ao botão submit com o seguinte código Server-side:
protected void Page_PreRender(object sender, EventArgs e)
{
btnSubmit.Attributes.Add(”onmouseup”, “ShowModalDialog();”);
}
Execute o exemplo, com alguns dados inválidos. Veremos a exibição da janela modal.
Janela Modal exibindo erros ao clicar no botão submit. Repare que o callout está visível por trás do background translúcido.
Mas há um pequeno problema que eu encontrei aqui. Se a propriedade “display” da <div> estiver definida como “none” ela não será exibida, embora o background seja desabilitado. Então eu tive que definir esta propriedade com o valor “block”. Porém, isto nos traz outro problema: A <div> fica visível por uma fração de segundo, quando a página carrega. Para resolver isto, eu tive que adotar uma solução um tanto quanto deselegante, mas funcional. Defina no código da página:
<body onload=”init();”>
Execute o exemplo novamente. Desta vez a <div> não vai piscar quando a página carregar!
Quaisquer sugestões, comentários e críticas são sempre bem-vindos. Abraços e keep coding!
Comentários