Utilizando Update Panel e Update Progress

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:

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

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.