Ajax - Usando o controle Timer

ASP.NET 2.0 - AJAX - O controle Timer

O controle Timer realiza postbacks em intervalos definidos de tempo. Se você usar o controle Timer com um controle UpdatePanel pode habilitar a atualização parcial da página em um intervalo de tempo definido como pode também efetuar um POST na página inteira. Fica a seu critério...

Eu apresentei a tecnologia AJAX para ASP.NET 2.0 no artigo : ASP.NET 2.0 - Usando ASP.NET AJAX

Geralmente você usa o controle Timer em uma das seguintes situações:

Atualizar periodicamente o conteúdo de um controle UpdatePanel sem dar um refresh na página;
Executar código no servidor a cada vez que o controle Timer causar um postback;
Postar de forma síncrona toda a página web para o servidor em um intervalo de tempo;

O controle Timer é um controle de servidor que incorpora um componente JavaScript em uma página Web; este componente inicia o postback do Navegador quando o intervalo de tempo que estiver definido no intervalo for alcançado. Você define as propriedades para o controle Timer no código que roda no servidor e aquelas propriedades são passadas para o componente JavaScript.

Uma instância da classe ScriptManager precisa estar incluída na página para que você possa usar o controle Timer.

Quando um postback for iniciado pelo controle Timer , ele dispara o evento Tick no servidor e você pode criar um tratamento de evento para o evento Tick realizar ações quando a página é postada para o servidor.

Você deve definir a propriedade Interval para especificar com que frequência o postback irá ocorrer e a propriedade Enabled para ativar ou desativar o controle Timer. A propriedade Interval é definida em milisegundos e possui um valor padrão de 60.000 milisegundos ou 60 segundos.

Obs: Se você definir a propriedade Interval para um valor muito pequeno pode gerar um aumento significativo de tráfego na rede.

Você pode incluir mais de um controle timer em uma página Web se diferentes controles UpdatePanel precisam ser atualizados em intervalos diferentes de tempo sendo que uma única instância do controle Timer pode ser o gatilho para mais de um controle UpdatePanel na página.

Quando um controle Timer é incluído dentro de um controle UpdatePanel , o controle Timer automaticamente trabalha como um gatilho para este controle e você pode sobrescrever este comportamento definindo a propriedade ChildrenAsTriggers do controle UpdatePanel como false.

Neste caso o componente JavaScript é re-criado somente quando cada postback termina. Desta forma se a propriedade Interval for definida como 60.000 milissegundos (60 segundos) mas o postback demora 3 segundos para se completar , o próximo postback irá ocorrer 63 segundos depois do postack anterior.

Vejamos a seguir um exemplo de utilização bem simples do controle Timer em uma páginas ASP.NET.

O projeto será criado usando o Visual Web Developer Express(VWD). Lembre-se que você tem que efetuar o download do componente ASP.NET AJAX 1.0 no site : http://ajax.asp.net/

Abra o VWD e crie um novo web site selecionando o template - ASP .NEt AJAX-Enabled Web Site usando a linguagem Visual Basic , a location File Sistem, com o nome de ajaxTimer;

A partir da toolbox , na guia - AJAX Extensions - inclua no formulário Default.aspx o controle Timer: (A sua página já deve exibir o controle ScriptManger)

Timer1 => ID = Timer1 Interval=10000 Enabled= True

<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">

A seguir inclua um controle UpdatePanel:

UpdatePanel => ID = cotacaoDolarPanel

Abaixo do controle Timer, e no seu interior inclua dois controles Label :

- Label1 => ID = cotacaoDolar.Text
- Label2 => ID = horaAtualizacao.Text

Inclua também 3 controles RadioButton : RadioButton1 , RadioButton2 e RadioButton3 e uma Label com ID= horaCriacaoPagina

Agora no code-behind da página , no arquivo : Default.aspx.vb inclua o seguinte código:

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
   horaCriacaoPagina.Text = DateTime.Now.ToLongTimeString()
End Sub

Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)
   cotacaoDolar.Text = GetcotacaoDolar()
   horaAtualizacao.Text = DateTime.Now.ToLongTimeString()
End Sub

Private Function GetcotacaoDolar() As String
    Dim randomcotacaoDolar As Double = 1.8 + New Random().NextDouble()
    Return randomcotacaoDolar.ToString("C")
End Function

Protected Sub RadioButton1_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Timer1.Interval = 10000
Timer1.Enabled = True
End Sub

Protected Sub RadioButton2_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Timer1.Interval = 60000
Timer1.Enabled = True
End Sub

Protected Sub RadioButton3_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Timer1.Enabled = False
End Sub

End Class

O código acima atribui a hora atual - DateTime.Now.ToLongTimeString() - à hora de criação da página e executa o evento Timer1_Tick obtendo a cotação do Dólar através da geração de um número randômico atribuindo-o a label na página bem como mostrando a hora desta atualização no intervalo definido pelo usuário. A opção é feita marcando uma das opções de intervalo expressos nos controles RadioButton. (A função getCotacaoDolar() apenas gera valores aleatórios a partir do valor 1.80 para exibir valores diferentes durante a atualização.)

Ao executar o projeto você verá a seguinte página , e mesmo que defina um intervalo para atualização das informações nada vai ocorrer.

Por que ? Ora, você tem que incluir o gatilho (Triggers) abaixo, pois o controle Timer esta fora do UpdatePanel, e, não será atualizado como um postback Ajax.

Definindo no interior do controle UpdatePanel o gatilho acima:

<asp:UpdatePanel ID="cotacaoDolarPanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
<ContentTemplate>
Valor do Dólar é =>
<asp:Label id="cotacaoDolar" runat="server"></asp:Label><BR />
atualizado as : 
<asp:Label id="horaAtualizacao" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>

Após ao executar o projeto você constatará que os valores são atualizados no intervalo de tempo definido:

Pegue o projeto completo aqui : ajaxTimer.zip

Veja o projeto funcionando em : http://www.macoratti.net/ajaxtimer/

Eu sei é apenas ASP.NET, mas eu gosto...

Referências: http://ajax.asp.net/docs/overview/UsingTimerControlTutorial.aspx

José Carlos Macoratti