Utilizando Update Panel e Update Progress

ASP.NET

Monday, August 10, 2009

Introdução

Este artigo faz parte de uma série de artigos sobre componentes do Ajax Control Toolkit, cujo objetivo é demonstrar algumas funcionalidades de alguns componentes do pacote.

Neste artigo, vou explicar e exemplificar dois componentes que considero os mais importantes do pacote Ajax Control Toolkit o UpdatePanel e o UpdateProgress.

UpdatePanel

O UpdatePanel enriquece muito as aplicações web. Este componente permite que possamos atualizar apenas a área que esta delimitada pelo componente, ou seja, podemos atualizar parcialmente o nosso site sem necessidade de criarmos client side scripts.

Um Postback assíncrono tem o seu ciclo de vida igual a um Postback da página, porém no Postback assíncrono apenas o interior de regiões delimitadas são atualizadas.

Propriedades do UpdatePanel

Abaixo falarei apenas de algumas das propriedades mais usuais.

•ChildrenAsTriggers: esta propriedade é por padrão definida como True e indica quando acontece um Postback de um UpdatePanel filho, ou seja, poderia ser utilizado em um cenário, onde temos uma lista de categorias e uma lista de subcategorias, onde as subcategorias devem ser atualizadas conforme a seleção da categoria.

•UpdateMode: Esta propriedade indica quando um UpdatePanel é executado, esta opção é desconsiderada quando o UpdatePanel estiver dentro de um outro UpdatePanel.

?Always, esta opção indica que o UpdatePanel sempre será atualizado, isso é em qualquer postback da página ou componente assíncrono. ?Condicional, esta opção indica que o UpdatePanel será autalizado somente quando uma das condições abaixo forem verdadeiras.

¦Quando um postback for causado por uma trigger
¦Quando o método update() for chamado
¦Quando o controle estive dentro do UpdatePanel pai.
¦Quando a propriedade ChildrenAsTriggers for true e qualquer controle filho do UpdatePanel causar um postback.
•Triggers: Esta propriedade permite adicionarmos objetos e eventos, isto serve para indicar o que irá disparar a atualização do UpdatePanel.

Alguns componentes não podem ser adicionados a um componente UpdatePanel tais como:

•WebParts;
•TreeView;
•Menu
•DetailsView e GridView (quando a propriedade EnableSortingAndPagindCallBack for definida como true.
•FileUpload
•Login, ChangePassword, PasswordRecovery e CreateUserWizard
•Por fim os controles de validação.

Exemplificando

Neste exemplo, vamos codificar uma área para que ela atualize uma informação em determinada região do site sem fazer o postback, para isso, vamos utilizar dois textbox que irão exibir a data e a hora atual, primeiramente vamos fazer preencher os dois componentes de maneira convencional, e em seguida vamos adicionar um UpdatePanel e tornar o preenchimento de um dos objetos sem fazer o postback da página.

Para isso, vamos criar um novo projeto e desenhar o webform conforme as definições a seguir.

Na codificação iremos fazer com que ao acionarmos o evento click do botão, o mesmo preencha os dois campos da tela com a data e a hora atual.

Quando executarmos esse aplicativo ele irá retornar a data e a hora na tela dentro de cada TextBox.

Agora vamos modificar utilizando o UpdatePanel para perceber a diferença de um processamento assíncrono. Para isso, basta adicionar o componente UpdatePanel que fica na guia AJAX Extensions e incluir o componente TextBox1 dentro da área do UpdatePanel.

No painel de propriedades do UpdatePanel, vamos parametrizar o comportamento do componente, para isso vamos alterar a propriedade Triggers e adicionar o gatilho do tipo AsyncPostBack, com a chamada ao componente Button1 para ele atualizar apenas o TextBox1 no evento click, conforme a imagem abaixo.

Agora ao executarmos, perceberemos que no evento Click do Button1 ele irá atualizar apenas o componente que esta dentro do UpdatePanel.

UpdateProgress

Quando trabalhamos com UpdatePanel, executamos tarefas que são assíncronas. Essas não fazem o postback da página, o que não transmite para usuário final a idéia de estar processando, o UpdateProgress serve para indicar o estado da operação, dando maior segurança ao usuário que estará sabendo que a mesma ainda está em execução.

Algumas propriedades do componente

AssociatedUpdatePanelId: esta propriedade permite associar um UpdateProgress com um UpdatePanel.

ProgressTemplate: é definida através de tags HTML e indica a mensagem ou a imagem que será utilizada durante a execução do ProgressTemplate.

DynamicLayout: esta propriedade indica como o componente irá se comportar e renderizar na tela. Se o valor desta propriedade for definida como True ela não ocupará área na tela e a página se renderizará automaticamente conforme a necessidade. Porém se o valor for false o mesmo ocupará lugar na página mesmo quando não exibido.

Usando o UpdateProgress

O exemplo a seguir, carregará na página uma imagem que hospedei em meu link e propositalmente é uma imagem pesada para demorar a carga.

Veja o layout abaixo.

Ao rodar este projeto, dependendo do seu link de conexão, demorará para carregar esta imagem, vamos indicar para o usuário do nosso aplicativo que a imagem está carregando.

Incluiremos um UpdateProgress e um gif indicando o processamento ao nosso projeto. Como dica sugiro o site http://www.ajaxload.info/, neste website há um gerador de gifs.

Nesta tela foram incluídos um ScriptManager, UpdatePanel e dentro do UpdatePanel foram incluídos um label e um control Button.

Abaixo uma Div com um UpdateProgress e a imagem de loading.

A codificação é muito simples, adicionei no procedimento referente ao evento click do ButtonControl uma chamada ao Sleep para causar um atraso no processamento e para sabermos que algo realmente for atualizado coloquei um DateTime no label.

Agora falta definir a propriedade AssocietadeUpdatePanelID do UpdateProgress para o nome do UpdatePanel que será atualizado.

Ao executar o aplicativo, veremos que por causa do Sleep ele criará um atraso de retorno para o usuário e ele irá mostrar o Loading durante esse atraso e ao retornar a informação ocultará a imagem.

Conclusão

A exemplo de aplicações windows client que permitem maior interação com o usuário, as aplicações web com o auxilio do AJAX estão chegando cada vez mais próximas.

Neste artigo, com o uso do UpdatePanel aprendemos a criar atualizações assíncronas na página sem utilizar scripts client side. Já com o UpdateProgress aprendemos a exibir o estado da operação, ou seja, deixar visível para o usuário quando um elemento de uma página está sendo carregado.