Utilizando o Update Panel e Update Progress do AJAX

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

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.

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.

 

Vá até a ToolBox na guia AJAX Extensions e selecione e adicione ao WebForm o componente ScriptManager.



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.

 Agora clique no outro Button, que esta fora do UpdatePanel.

 
Veja que no Browser (neste caso o Internet Explorer) se apresenta como carregando, na guia da página e abaixo o status na barra de progresso. 

 

 

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.

 
 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?