Trabalhando com Update Panel no ASP.NET

Neste artigo apresento de forma simples e prática como utilizar o componente Update Panel para aplicar efeitos de chamadas assíncronas ao servidor para dar aspecto mais profissional aos sites e sistemas web.

por Fabrício Lopes Sanchez

Uma das grandes vantagens da plataforma .NET é integrar diversas tecnologias em um único ambiente. Quando falamos em desenvolvimento para web essa característica torna-se especialmente importante pois, se existe um ambiente de softwareonde há uma enorme miscigenação de tecnologias éo ambiente web. Um exemplo simples desta afirmação que acabei defazer é um formulário web. Podemos ter facilmente duas, três ou mais tecnologias interagindo para fazercom que determinado formulário de cadastro, por exemplo,funcione corretamente.

Neste artigo apresento um destes importantes recursos que vem nativamente na plataforma .NET e que é extremamente utilizado em aplicações web - o UpdatePanel (Painel de Atualização em português). Ao final apresento também um pequeno aplicativo que faz a utilização do componente e assim, fechamos o conceito relacionado ao mesmo.

O componente "Update Panel"

O Update Panel é um componente do ASP.NET que permite que determinadas áreas sejam atualizadas indepentemente da atualização da página. Para tornar um pouco mais clara essa idéia, imagine um formulário de cadastro declientes onde, neste formulário, duas das várias informações solicitadas são Estado (UF) e Cidade ondeeste clientereside. Imagine agora que estas duas informações estão presentes em um Banco de Dados em duas tabelas diferentes, uma que armazena todos os estados e outra que armazena todas as cidades. Imagine agora que o formulário possui dois DropDownLists (um para estados e outro para cidades) sendo que estes são preenchidos com dados destas tabelas. Agora imagine o quão interessante seria se você, que está cadastrando o novo cliente, tivesse a possibilidade de ao clicar no DropDownList de estados e selecionar umas das opções (um estado), automaticamente o DropDownList de cidades fosse preenchido automaticamente somente com as cidades do estado selecionado por você? Interessante não é?

Este e diversos outros efeitos que visualizamos diariamente em formulários web a fora, são recursos baseados em AJAX, uma robustae eficiente biblioteca JavaScript (abordarei este tema em um artigo futuro).

Quando utilizamos um componente Update Panel em determinada página ASP.NET estamos dizendo ao interpretador que a região desta página compreendida pelo UP (Update Panel) poderá sofrer PostBack independentemente do PostBack da página. Este conceito é familiar para os profissionais de Web e é conhecido como PostBack Assíncrono. Essa mágica só é possível pelo fato de, internamente, o UP trabalhar com a biblioteca AJAX.

Antes de partirmos para a prática vamos então conhecer as propriedades quedefinem o comportamentode umUpdate Panel.

ChildrenAsTriggers: Esta propriedade tem a função específica de apontar para o PostBack de umUP filho. Este atributo poderia ser perfeitamente aplicado ao cenário apresentado anteriormente para Estados e Cidades, por exemplo,onde, ao selecionar-se determinado Estado, as respectivas Cidades daquele Estado seriam listadas. Neste caso, o UP Filho seria aquele que contém a relação de Cidades.

UpdateMode: Esta propriedade tem a função de indicar quando determinado UP será atualizado. Ela possui as seguintes opções de configuração:

· Always: indica que o UP será atualizado sempre, isto é, sempre que ocorrer algum PostBack na página (independente deste ser gerado pela própria página ou por algum componente assíncrono) o UP será atualizado e realizará PostBack.

· Conditional: Indica que o PostBack ocorrerá apenas quando uma das situações abaixo forem reais:
- Quando uma trigger causar um PostBack;
- Quando o método Update() for invocado;
- Quando o controle estivernos limites compreendidos peloUP Pai;
- Quando um UP Filho causa um PostBack. Obviamente que a propriedade ChildrenAsTriggers deve estar marcada como True;

Os Update Panels possuem algumas limitações quanto aos componentes suportados. Nem todos os componentes ASP.NET podem trabalhar em sinergia com os UP. São eles:

· Webparts;

· Menu;

· TreeView;

· DetailsView e GridView;

· Login;

· FileUpload;

· Componentes de validação como: Required Field Validator, etc.

Atualizando um TextBox baseado na Seleção de um DropDownList

O exemplo apresentado é bem simples mas ilustra perfeitamente bem o funcionamento do Update Panel. Uma observação importante é que o projeto de exemplo deste artigo foi criado em Visual Studio 2010. Em um artigo futuro abordarei as principais novidades do VS 2010 em relação a suas versôes anteriores.

Após abrir o VS 2010 vá em File > New > Project. Selecione a opção Web (à esquerda) e a direita selecione a opção "ASP.NET Empty Web Application". Neste projeto estou utilizandoa linguagem C#, mas você pode escolher a linguagem de sua preferência.A Figura 1 apresenta a tela que deverá ser apresentada a você.

Figura 1: Tela de seleção do projeto a ser criado

Após escolher o nome do projeto e a pasta onde o mesmo será salvo, clique em OK. Se tudo ocorreu bem você deverá estar visualizando sua Solution Explorer conforme apresentado na Figura 2:

Figura 2: Solution Explorer com o projeto web criado

Conforme o subtítulo sugere, o que faremos neste exemplo é, ao selecionar um Drop Down List preenchido com vários nomes de usuários o sistema dispara no AutoPostBack deste componente uma função que gera um código e seta em uma Text Box. Tudo isso, é claro, sem efetuar um PostBack na página e sim apenas no UP do TextBox. A Figura 3 apresenta a tela montada com os componentes.

Figura 3: Tela onde as ações serão executadas

Nesta tela temos vários aspectos importantes a serem considerados. O primeiro é o ScriptManager, como pode ser visto na Figura 3. Para que os aplicativos com UpdatePanel funcionem no ASP.NET é necessário que o ScriptManager seja adicionado ao escopo da aplicação. O ScriptManager é (falando de forma simplista) um "Mini Framework" que suporta as operações Ajax no .NET. Para adicionar o ScriptManager à sua página basta ir a Toolbox na guia "Ajax Extensions" e arrastá-lo para seu projeto.

Outro aspecto importantíssimo para nosso exemplo é a habilitação da propriedade "AutoPostBack" do componente Drop Down List (AutoPostBack = True). Ao habilitar esta opção estamos dando permissão para o componente realizar um PostBack ao selecionarmos determinado item de sua coleção.

Além dos aspectos mencionados acima, outra importante característica é o fato de o TextBoxSenha estar dentro de um Update Panel, conforme pode ser observado na Figura 3. A linha cinza claro envolve toda a célula da tabela e, dentro de seus limites se encontra do TextBoxSenha.

Finalmente, nos resta agora configurar as ações que o Update Panel deverá tomar sobre o TextBoxSenha quando uma ação de seleção de algum ítem da coleção do Drop Down Listfor executada. A Figura 4 apresenta o estado final da configuração do UP:

Figura 4: Configuração do Update Panel

Na tela acima estamos apresentando a seguinte configuração: Adicionamos um AssincPostBack relacionado ao DropDownListUsuarios, mais precisamente ao evento SelectedIndexChanged do DropDownListUsuarios. Assim, quando o método SelectedIndexChanged for chamado, o resultado do processamento deste método será aplicado apenas aos elementos dentro do UP - neste caso, o Tex tBox.

A ação que o método SelectedIndexChanged deverá executar é, de acordo com o usuário selecionado, gerar uma senha para esse usuário. Vamos então a implementação do método SelectedIndexChanged. A Listagem 1 apresenta o código deste método:

Listagem 1: Código do método SelectedIndexChanged

O fonte do método geraCodigoUnicoDeMidia() é o da Listagem 2:

Listagem 2: Fonte do método geraCodigoUnicoDeMidia()

Assim, quando o método SelectedIndexChanged do DropDownListUsuarios for acionado pela seleção de algum elemento de sua coleção, este atualizará uma senha no conteúdo do TextBoxSenha com o PostBack apenas nesso UpdatePanel no qual está inseridoo TextBox. O resultado final da execução é apresentado nas Figuras 5 e 6.

Figura 5: Seleção do elemento do DropDownList

Figura 6: Senha gerada para o usuário selecionado