Neste artigo iremos ver de forma prática e simples, como utilizar alguns controles do AJAX como o update panel e o update progress, onde faremos chamadas assíncronas com o ASP.NET Ajax.
Vamos utilizar os controles ScriptManager, Update Panel e Update Progress.
Primeiramente vamos fazer um exemplo com o UpdatePanel e em seguida utilizando o mesmo projeto, vamos utilizar o UpdateProgress.
Antes de utilizarmos é bom sabermos um pouco mais sobre estes controles, então vou fazer uma breve descrição sobre cada um.
ScriptManager – Deve existir só um controle por página, ele é o controle mais importante, pois é ele que habilita as funcionalidades do AJAX.
UpdatePanel: Faz com que partes específicas de sua página funcione de forma assíncrona. É necessário que esteja adicionado na página o ScriptManager.
UpdateProgress: Permite que você apresente uma imagem ou um texto ao usuário, enquanto é executada a requisição. É necessário que esteja adicionado na página o ScriptManager e que esteja associado a um UpdatePanel.
UpdatePanel
Vamos ver agora, como utilizar o UpdatePanel.
Crie um novo projeto ASP.NET.
Nesta mesma guia, selecione e adicione ao WebForm o componente UpdatePanel.
Feito isso, agora vamos adicionar um Label e um Button dentro do componente UpdatePanel que acabamos de adicionar. UpdatePanel é um controle do tipo Container onde você decide o que colocar dentro dele.
De duplo clique no Button, com isso iremos para a classe .cs onde ira o nosso código c#.
Para simular a requisição da página vamos colocar um sleep de 2 segundos, pois como estamos fazendo a aplicação local, a requisição seria muito rápida, não dando para notar algo.
Então deixe o seu código da seguinte forma.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Threading;//Adicionado para utilizar o Sleep namespace estudando_ajax { public partial class estudo_ajax : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { //Pausa de 2 segundos somente para simular tempo de //requisição da página. System.Threading.Thread.Sleep(2000); Label1.Text = "UpdatePanel!"; } } } |
Rode a sua aplicação e perceba, que ele carrega apenas o que esta dentro do UpdatePanel, de forma assíncrona, não carregando a página por inteira e sim somente o que esta naquele determinado local.
Agora coloque um outro Button, fora do componente UpdatePanel.
De duplo clique nele e faça como no código anterior, somente atribua um nome diferente a propriedade Text do Label para diferenciarmos no texto.
protected void Button2_Click(object sender, EventArgs e) { //Pausa de 2 segundos somente para simular tempo de //requisição da página. System.Threading.Thread.Sleep(2000); Label1.Text = "Sem o update panel."; } |
Agora clique e veja que ao clicar em nosso primeiro Button, ele da um tempo de dois segundos e modifica o label, sem piscar a tela ou qualquer tipo de ação visível no Browser.
UpdateProgress
Agora vamos trabalhar com o UpdateProgress e saber um pouco mais sobre sua utilidade.
Algumas vezes o Postback pode demorar um pouco, dependendo do tipo de operação e para o usuário as vezes pode ser meio tedioso ou muitas vezes ele pode imaginar que aconteceu algum problema e fechar a aplicação. Portanto com o UpdateProgress, podemos dar um FeedBack, para que ele veja que algo esta acontecendo e aguarde o fim da operação.
Um dos requisitos para utilizar o UpdateProgress é que a página já tenha o ScriptManager e que o UpdateProgress esteja associado a algum UpdatePanel.
Na guia ToolBox no gupo AJAX Extensions, selecione e adicione ao WebForm o componente UpdateProgress.
Selecione o componente UpdateProgress e na guia Properties, na propriedade “AssociatedUpdatePanelID” selecione o UpdatePanel (componente onde esta o Label e o Button), fazendo assim a associação do UpdateProgress ao UpdatePanel.
Dentro do UpdateProgress digite alguma coisa. Em nosso exemplo adicionamos uma imagem dentro de UpdatePanel e digitamos o seguinte texto “Aguarde. Em Processamento....”.
Execute sua aplicação, clique no Button que esta dentro de UpdatePanel e veja o resultado.
Espero que este artigo lhe tenha sido útil.
Muito obrigado pela sua atenção.