ASP.NET Passo a Passo AJAX

Apresentação em tema: "ASP.NET Passo a Passo AJAX"— Transcrição da apresentação:

1 ASP.NET Passo a Passo AJAX
Conteúdo do Capítulo Entender o problema que o AJAX soluciona Escrever sites com a tecnologia AJAX

2 ASP.NET Passo a Passo AJAX
Conceitos AJAX é a sigla de Asynchronous JavaScript and XML. No http padrão o usuário solicita uma página ao servidor e fica aguardando a atualização completa da página para visualizar o resultado. O AJAX introduz uma biblioteca de scripts de cliente para facilitar chamadas assíncronas ao servidor. Desta forma a visualização de um site com AJAX é mais dinâmica e agradável que um site com html padrão. O suporte AJAX no ASP.NET consiste em um conjunto de componentes que junto com scripts de cliente se integram para produzir o comportamento do AJAX. Os componentes do ASP.NET para implementação do AJAX são ScriptMananger, ScriptManangerProxy, UpdatePanel, UpdateProgress e Timer.

3 ASP.NET Passo a Passo AJAX
Aplicação com AJAX Crie uma aplicação Web (Empty Web Application) de nome AJAXORama. Adicione ao site um formulário de nome WebForm1.aspx. O uso dos controles AJAX exige que um controle ScriptManager seja incluído na página antes que qualquer outro componente. Insira um ScriptManager na aplicação. Por convenção ele deve ficar na TAG form, mas fora do DIV principal. Ajuste a localização do componente se necessário. <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> </div> </form>

4 ASP.NET Passo a Passo AJAX
Aplicação com AJAX Insira um rótulo e um botão no formulário. Altera o ID do rótulo para LabelDateTimeOfPageLoad. Altere o texto do botão para “Clique Aqui”. Inclua no tratamento do evento PageLoad o código para ler a hora do computador e apresentar no rótulo, conforme apresentado abaixo. Execute a aplicação e clique algumas vezes no botão. Observe que o rótulo irá apresentar a data e a hora atual a cada clique. protected void Page_Load(object sender, EventArgs e) { LabelDateTimeOfPageLoad.Text = DateTime.Now.ToString(); }

5 ASP.NET Passo a Passo AJAX
Aplicação com AJAX Adicione um controle UpdatePanel à página. Insira um novo rótulo dentro painel e altere seu ID para LabelDateTimeOfButtonClick. Inclua no tratamento do evento PageLoad o código para ler a hora do computador e apresentar no novo rótulo, conforme apresentado abaixo. Execute a aplicação e clique algumas vezes no botão. Observe que ambos os rótulos irão apresentar a data e a hora atual a cada clique. Embora o segundo rótulo esteja dentro do UpdatePanel, a ação que causa o postback está acontecendo fora dele. protected void Page_Load(object sender, EventArgs e) { LabelDateTimeOfPageLoad.Text = DateTime.Now.ToString(); LabelDateTimeOfButtonClick.Text = DateTime.Now.ToString(); }

6 ASP.NET Passo a Passo AJAX
Aplicação com AJAX Agora transfira o botão para dentro do UpdatePanel (utilize recortar/colar). Execute a aplicação e clique algumas vezes no botão. Observe que apenas o rótulo interno ao UpdatePanel é alterado. O rótulo externo permanece com a hora inicial. Este efeito é conhecido como atualização parcial da página e são chamados por alguns autores de call-back (ao invés de postback).

7 ASP.NET Passo a Passo AJAX
Aplicação com AJAX É possível disparar uma atualização de um painel a partir de eventos externos ao painel. Retire o botão do interior do UpdatePanel de forma que a aplicação volte a funcionar como implementada originalmente. Clique na propriedade Triggers do UpdatePanel. Clique em Add para adicionar um gatilho. Selecione o Controle Button1 e o evento Click. Com essa configuração, ao clicar no botão é realizado um call-back do Painel. Novamente, a hora do rótulo externo ao painel não é atualizada.

8 ASP.NET Passo a Passo AJAX
Aplicação com Timer e AJAX O Timer é um componente que executa um postback na página em um intervalo de tempo previamente estabelecido. Insira na aplicação um componente Timer. Ajuste a propriedade interval para 3000 de forma a programar a atualização para cada 3 segundos. Execute a aplicação e observe os rótulos. A cada 3s a hora é atuali- zada em ambos os rótulos. Clique na propriedade Triggers do UpdatePanel e adicione novo gatilho. Selecione o Controle Timer1 e o evento Tick. Execute a aplicação e observe que apenas a hora do rótulo interno irá ser atualizada.

9 ASP.NET Passo a Passo AJAX
Atividade Desenvolver um chat utilizando Timer e AJAX Crie um banco de dados de nome Chat Crie uma tabela de nome ChatMsg com os colunas id, msg, data, e usuário. A coluna id deve ser do tipo chave e autoincremento. Crie uma aplicação ASP.NET vazia e introduza nela um WebForm. Insira no WebForm dois TextBox, um para o campo usuário e outro para o campo mensagem, um botão para Enviar. Introduza também um painel AJAX e dentro dele coloque um Timer e um GridView. A interface deverá estar agora como apresentado na figura do próximo slide

10 ASP.NET Passo a Passo AJAX
Atividade Desenvolver um chat utilizando Timer e AJAX

11 ASP.NET Passo a Passo AJAX
Atividade Desenvolver um chat utilizando Timer e AJAX Programe o grid para ler as últimas 100 mensagens em ordem decrescente de inserção utilizando o comando Configure a coluna de data para apresentar a data no formato dd/mm/yy hh:mm Programe o timer para atualizar a cada 1 segundo Configure a propriedade ViewStateMode do gridview para Disable de forma que ele atualize a informação entre dois acessos. SELECT TOP (100) * FROM ChatMsg ORDER BY id DESC

12 ASP.NET Passo a Passo AJAX
Atividade Desenvolver um chat utilizando Timer e AJAX Programe o botão enviar para gravar no banco de dados as informações de usuário, mensagem e data. Execute a aplicação e lançe uma mensagem no chat. Abra outro navegador, acessando a mesma página e simule um diálogo O resultado deverá ser como apresentado na figura do próximo slide

13 ASP.NET Passo a Passo AJAX
Atividade Interface do chat com duas páginas abertas