Criando uma janela modal para validação de erros com ASP.NET

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.

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!

Web 2.0, 3.0, 4.0 enfim internet!

Salve,

Amigos, sem muitas apresentações, meu nome é Mateus Martins, e trabalho com internet a muito, muito tempo, e nesse muito tempo vi muita coisa acontecer, vi muita coisa mudar, muita coisa nascer, vi muitas delas morrerem ou nascerem mortas, vi muitas renderem milhões, quando aconteceu o estouro da chamada "bolha da internet" eu estava la dando meus primeiros passos, e depois disto muita coisa mudou "fazer site" virou profissão, as pessoas se profissionalizaram, as empresas se profissionalizaram, tivemos uma faze muito obscura, momento onte todo mundo se armou com seu “Personal FrontPage” e foi pra guerra “fazer sites”, mais a guerra fria acabou, a adivinhem, a guerra dos browsers acabou, tudo começou a ficar mais “fácil” e pronto, uma onda cobriu o cenário novamente, nasceu a web 2.0 e todo mundo se apavorou e veio a web 3.0, 4.0, 100000.0 e “ai meu deus”, isso é tudo internet.

Muito cuidado novamente, com certeza estamos em uma fase de transição impar na história da internet, e esta faze só é possível graças a maturidade do conceito de desenvolvimento que evoluiu muito nos últimos anos, O consorcio W3C foi fundamental para isso a partir do momento que começou a discutir e documentar o que chamamos de padrões de desenvolvimento.

Nada de muito novo ai, basicamente começamos a “usar as coisas da maneira como elas devem ser usadas”. Mas o que isso quer dizer?

Usar as coisas da maneira como elas devem ser usadas.

Vamos pensar um pouco no que eu preciso para fazer uma pagina para internet. O produto final de uma pagina na internet possui normalmente uma programação HTML, eu digo produto final, pois podemos usar linguagens dinâmicas como PHP ou ASP entre varias outras, que por fim, gerarão um código HTML para ser exibido em um navegador. Uma apresentação em flash, uma animação, um banner, uma imagem, só aparecem no seu navegador graças ao HTML.

Portanto o HTML é o bem mais precioso que temos na internet, e ele precisa apenas de um navegador para ser exibido, mesmo que este navegador esteja instalado em um celular, ou qualquer outro dispositivo eletrônico.

Nossa, que maravilhoso então, o HTML salvou o mundo? Não, o HTML é apenas uma linguagem de marcação de texto, isto significa que quando usamos as coisas da maneira como elas devem ser usadas, o HTML é basicamente texto e marcação, caso você queira dar uma aparência a seu texto, aplicar um belo layout é necessário trabalhar com folhas de estilo em cascata, conhecidas como Cascading Style Sheets (CSS). O CSS possui sua sintaxe a parte, suas regras e normas, e elas podem ser colocadas no meio de um HTML, porem recomenda-se separar um arquivo HTML de um arquivo CSS, existem vários motivos para fazermos esta separação, dentre eles cito, um HTML pode ter vários CSS, um para o monitor, um para Impressão e um para o Celular, um navegador de texto ou um robô como o robô do Google, não precisa ler o seu CSS, ele lê apenas o HTML que é quem possui conteúdo relevante para buscas.

Ótimo, então só para sintetizar o que foi dito aqui, temos dois arquivos para uma mesma página, um arquivo com conteúdo HTML e outro com a formatação em CSS, desta forma começamos a separar nossa aplicação em camadas, e temos duas camadas até o momento. Agora podemos avançar um pouco mais no nosso conceito, e dar mais poder a nossa aplicação, esse poder seria apenas o controle de comportamento e interações com o usuário, e o responsável por isso seria o Javascript.

O Javascript foi uma linguagem que ganhou força com o fim da guerra dos browsers, a partir do momento que todos os navegadores mais usados começaram a interpretá-lo de forma muito semelhante, a comunidade de desenvolvimento começou a ficar mais a vontade para utilizá-lo, porem, ainda é preciso cautela, vários navegadores não dão suporte a ele, ou dão um suporte muitíssimo limitado e por esse motivo é vital que separemos em nossa aplicação o Javascript de nosso HTML, chamamos isso de Javascript não obstrutivo e desta forma completamos o triangulo de nossa pagina HTML + CSS + Javascript

Separar uma aplicação em camadas é vital para a escalabilidade de um projeto, para seu bom funcionamento em vários dispositivos diferentes, e também para facilitar a manutenção do mesmo. Mesmo que a curva de aprendizado seja um pouco mais longa, principalmente para quem esta acostumado a trabalhar com tabelas, porem são muitos os frutos que se colhe após adotar este modelo.

Nos próximos capítulos vamos ver este conceito funcionando na prática, então até la pessoal!