1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer

Relógio Digital com Ajax – Asp.Net + C#

 

Softwares Utilizados

Visual Studio 2012 Express para Web
Download: http://www.microsoft.com/visualstudio/ptb/downloads#d-2012-express

Proposta:

Utilizar os conceitos de Ajax dentro da IDE VS2012 para desenvolver um relógio digital.

Introdução

Hoje veremos como utilizar Ajax dentro do Visual Studio com linguagem de programação C#. Mas antes de iniciarmos vamos entender um pouco sobre o que é Ajax.

Definição de Ajax:

“AJAX (acrônimo em língua inglesa de Asynchronous Javascript and XML , em português "Javascript Assíncrono e XML") é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. Foi inicialmente desenvolvida pelo estudioso Jessé James Garret e mais tarde por diversas associações. Apesar do nome, a utilização de XML não é obrigatória (JSON é frequentemente utilizado) e as solicitações também não necessitam de ser assíncronas.”

Resumindo:

Em aplicações Desktop sempre que atualizamos um componente; seja o texto, cor ou outra propriedade; a mesma é atualizada somente no componente ou área indicada. Isto já não acontece na Web, pois na web temos o conceito de “POST” que atualiza a página inteira.
O “POST” geralmente deixa o site mais lento por ter que carregar a página inteira a cada requisição, para evitar este tipo de carregamento utilizamos a técnica de Ajax que faz o carregamento localizado evitando que a página inteira recarregue.

O Projeto

O primeiro passo é abrir a IDE Visual Studio e iniciar um novo Projeto Web

Imagem 1-Criando novo projeto

Esolha Asp.NetWebForms Application

Imagem 2-Definição do tipo do novo projeto

Após digitar o nome do Projeto de da Solution clique em “OK”
Neste momento será apresentado o template padrão de novo projeto web

Imagem 3-Template padrão para Asp.net Web Forms

Vamos excluir as informações exemplo da página “Default.aspx”
Agora nosso Código fonte deve estar como na imagem abaixo

Imagem 4-Código Html após remoção do conteúdo exemplo

Vamos adicionar um Label que será o componente responsável por mostrar a hora, lembrando que poderíamos utilizar qualquer outro componente como ex: TextBox, Literal, etc...

Imagem 5-Label Adicionado

Defina a propriedade ID do Label para “RelogioLabel”
Agora para iniciarmos nossos testes vamos utilizar o evento Page_Load da página para setar um valor inicial para a propriedade Text do componente RelogioLabel
Para acessarmos o CodeBehind de nossa página aperte a tecla “F7”


Imagem 6-Linha de código para mostrar a hora atual

No evento Page_Load vamos adicionar a seguinte linha de código
RelogioLabel.Text = DateTime.Now.ToLongTimeString();

Ao executar nosso programa deverá apresentar o seguinte resultado

Imagem 7-Programa em execução

Na propriedade Text do componente RelogioLabel foi setado o valor da hora atual, mas por ser uma  página sem manipulações o valor será carregado uma única vez a cada vez que a página for carregada. Note que ao atualizarmos a página a hora atualiza, mas este tipo de atualização não serve para uma aplicação dinâmica. Enfim concluímos a primeira parte de nosso teste que é mostra a hora atual na propriedade Text do componente RelogioLabel.

Agora precisamos fazer com que o programa atualize a hora sem que haja a necessidade de atualizarmos a página, para isto vamos adicionar um LinkButton  para testarmos.
Definimos então a  propriedade ID do LinkButton para “AtualizarLinkButton”

Imagem 8-LinkButton adicionado

Voltamos para a área de Design e vemos que o LinkButton já aparece.

Imagem 9-Página principal modo Design

Clique duas vezes no LinkButton para criar o evento “Click”

Dentro do evento AtualizarLinkButton_Click vamos colocar o comando que altera a propriedade Text do RelogioLabel para mostrar a hora atual

Imagem 10-Evento AtualizarLinkButton_Click

Como deslocamos o comando, ao executar o programa não ira aparecer a hora, apenas o LinkButton. Ao clicarmos no LinkButton a hora é atualizada.


Imagem 11-Programa em execução

Imagem 12-Programa em execução após clicar no LinkButton

Até aqui tudo bem?
Ate o momento vimos como setar a propriedade para mostrar a hora e como atualizar a hora com um LinkButton; porem isto ainda não satisfaz o nosso objetivo final.
Notamos que ao clicar no LinkButton a página inteira é carregada novamente. Para evitarmos que isto acontece vamos utilizar de técnicas de Ajax para realizamos atualizações localizadas.
E é neste ponto que o Visual Studio e seus componentes levam vantagem sobre outras IDE’s, pois não precisaremos desenvolver uma linha de JavaScript ou de Retorno Xml para que o nosso Ajax funcione; para isto iremos utilizar o componente UpdatePanel que será nossa área de atualização dinâmica.

Vamos adicionar então um UpdatePanel e setar a propriedade ID para “RelogioUpdatePanel”

Imagem 13-Inserção do UpdatePanel

Dentro do nosso UpdatePanel vamos jogar nosso Label que será atualizado dinamicamente.

Imagem 14-UpdatePanel com Label dentro

No Final nosso modo Design deve estar desta forma

Imagem 15-Página em modo Design

Por padrão o UpdatePanel sempre é atualizado, para alterar esta característica vamos mudar a propriedade UpdateMode para  “Conditional”


Imagem 16-Propriedade UpdateMode do UpdatePanel

Como configuramos o componente a atualizar somente em algumas condições vamos definir estas condições; para definir vamos utilizar a propriedade Triggers que irá apontar quando nosso UpdatePanel deve ser acionado.
Para adicionar um novo disparo clique na Propriedade Triggers para abrir a tela de configurações

Imagem 17-Propriedade Triggers do UpdatePanel

Vamos adicionar um novo disparo assíncrono, na propriedade ControlID coloque “AtualizarLinkButton” e na propriedade EventName coloque “Click”

Imagem 18-Tela de disparos configurados

Vamos agora tentar entender o que acabamos de fazer, quando adicionamos um gatilho(trigger) siginifca que aquele determinado gatilho ira atualizar o UpdatePanel. Na definição temos que setar duas propriedades, a primeira é a “ControlID” que indica o ID do componente que será vinculado para disparar o gatilho. A segunda propriedade é a “EventName” que indica qual evento do componente ira disparar o gatilho e atualizar o UpdatePanel.
*Lembrando que se mais de um componente ou evento deve atualizar o UpdatePanel o mesmo devera ser adicionado um a um, haverá casos como exemplo tabelas dinâmicas que necessitarão atualizar o UpdatePanel em vários momentos e ações diferentes.

Note agora que ao executar o programa e clicar no LinkButton é atualizado somente a área do UpdatePanel


Imagem 19-Programa em execução com Ajax disparado pelo LinkButton

Ganhamos em desempenho já que a pagina não é recarregada a cada “click”.
Mas isto ainda não é o suficiente para nosso relógio funcionar perfeitamente, já que para atualizar a hora devemos clicar em atualizar. Pense se não seria interessante que houvesse um processo que executasse e atualizasse nosso UpdatePanel automaticamente.
Para isto precisamos criar um thread que é um processo do sistema que ira executar de tempos em tempos nosso comando, mas calma para tanto iremos utilizar um componente para facilitar a criação deste thread.

Vamos dar seqüência então, vamos adicionar o componente “Timer” que ira criar automaticamente a thread, facilitando nossa programação.

Imagem 20-Timer adicionado

Clique duas vezes em cima do RelogioTime para criarmos o evento  Tick, este evento é referente ao comando que será executado toda vez que a thread for acionada. No nosso caso vamos atualizar o RelogioLabel para mostrar a hora atual.

Imagem 21-Visualização do Timer em modo Design

Imagem 22-Evento Tick do Timer

Não podemos esquecer-nos de alterar a Trigger do nosso UpdatePanel para ser disparado pelo RelogioTimer.

Imagem 23-Reconfiguração do disparo

E por ultimo vamos alterar o tempo que o thread será executado, para isto altere a propriedade “Interval” do RelogioTimer.

Imagem 24-Propriedade Intrval do Timer

Ao executar nosso relógio digital já deve estar funcionando corretamente.

Imagem 25-Programa finalizado em execução

Conclusão:

Vimos que utilizar Ajax dentro do Visual Studio é simples, já que o mesmo não necessita de elaboração de funções complexas em Java script e modelos de retorno XML.
Vimos que a criação de threads é simplificada quando utilizamos o componente Timer onde configuramos seu intervalo de execução e através do evento Tick indicamos quais comandos dever ser executado.

Download do Projeto:

https://docs.google.com/file/d/0B0U2KWicWVidYkc0VVpnRTB3dTQ/edit?usp=sharing