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 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.