Contagem Regressiva com C# e JavaScript
Olá pessoal, gostariade mostrar hoje como desenvolver de forma dinâmica um contador regressivo feitoem javascript comunicando com o C#, mais especificamente com o Control Toolkit.
Requisitos:
Visual Studio.NET 2008
Linguagem C#.NET
AjaxControlToolkit
Foi me dado a missão de gerar um relatório quea cada 30 segundos atualizasse automaticamente depois de clicar no botão paragerar. Até ai é tranqüilo, pois é necessário usar o Timer e o GridView.
Só que era necessário mostrar os segundos natela ao usuário. Isto é, os segundos decrescentes 30, 29, 28, 27...e assim pordiante, o contador deve ser mostrado na tela acima de todos os objetos.
Para facilitar o artigo, vou mostrar algumastelas com o resultado do que foi desenvolvido. Para ficar mais fácil deentender, segue a tela 1. (imagem 1)
Imagem 1
Na figura (imagem 1), uma tela de gráfico émostrada com os segundos no canto direito sendo diminuído. O mesmo começou com30.
Esses segundos devem ficar em cima e toda atela, nunca podendo ficar a trás de algum componente de tela. Na próximaimagem, a tela subiu e os segundos continuam regredindo e acima do gráfico.(Imagem 2)
Imagem 2
Agora em diante vou mostrar como fazer estessegundos ficar acima da imagem e ter o sincronismo para atualizar a página peloC# depois de acabar a contagem.
Primeiro passo
O primeiro passo é criar o contador regressivoem JavaScript. (Code 1)
|
<script language=”javascript”> var parselimit; function inicio() { clock1.innerHTML = ""; var limit = "0:31" if (document.images) { parselimit = limit.split(":") parselimit = parselimit[0] * 60 + parselimit[1] * 1 } begintimer(); } function finalizar() { parselimit = 1; } function begintimer() { if (!document.images) return if (parselimit == 1) { //document.forms[0].submit(); //window.location = "site de destino apos o tempo" } else { parselimit -= 1 curmin = Math.floor(parselimit / 60) cursec = parselimit % 60 if (curmin != 0) { curtime = curmin + " minutos e " + cursec + " segundos para você sair dessa página" } else { curtime = cursec + " Segundos regredindo....." //window.status = curtime clock1.innerHTML = cursec setTimeout("begintimer()", 1000) } } } </script> <html> <span id="clock1"></span> </html> |
Code 1
Como é feito nocódigo em javascript para escrever na tela? A pergunta é fácil e tranqüila, nafunção inicio(), o objeto de telachamado clock1 é zerado com o innerHTML. No código beginTimer() esse mesmo objeto é escritona tela de tempos em tempos. Nas últimas linhas você pode ver o código, antesdo setTimeout(...).
O segundo passo é colocar a tela para atualizarde 30 em 30 segundos usando o Timer.
|
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> |
Code 2
Não preciso explicar muito como usar o Timer,só vou dar os passos para usar. Primeiro coloquei o registro na página doAjaxControlToolkit. Você pode pegar a DLL no site www.asp.net.
|
<asp:Timer ID="Timer1" runat="server" Enabled="false" Interval="30000" ontick="Timer1_Tick"> </asp:Timer> |
Code 3
Depois de colocar o registro, carreguei ocomponente chamado Timer onde coloquei desabilitado e no intervalo de 30.000milisegundos que equivale 30 segundos. Cliquei duas vezes no componente e gerouo onclick. (Code 4)
|
protected void Timer1_Tick(object sender, EventArgs e) { try { GerarRelatorio(); } catch (Exception ex) { throw ex; } } |
Code 4
Depois disso, o timer está funcionandoperfeitamente e de 30 em 30 segundos o sistema gera o relatório passando pelométodo Timer1_Tick. É lógico que usar o UPDATEPANEL (não citadoanterioremente).
Sempre visível
Para manter sempre visível o tempo rodando, preciseiusar o componente do Control Toolkit chamado AlwaysVisibleControlExtender.(Code 5)
|
<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="pnlClock" VerticalOffset="1" VerticalSide="Bottom" HorizontalSide="Right" HorizontalOffset="70" ScrollEffectDuration=".1"> </cc1:AlwaysVisibleControlExtender> <asp:Panel ID="pnlClock" runat="server" Visible="false"> <table width="100px" border="1" cellpadding="0" cellspacing="0" style="background-color:White; border-color:Black;"> <tr> <td> <br /> <span id="clock1"></span> <br /><br /> </td> </tr> </table> </asp:Panel> |
Code 5
Existem duas coisas importantes para se destacarno Code 5. A primeira é o uso e a configuração do componente AlwaysVisible... Asegunda é a colocação de um Panel contendo o <spanid=”clock1”></span>. Ou seja, não é toda hora que ele vai servisualizado de acordo com a regra de negócio. O Panel é para ser usado nocomponente AlwaysVisibleControlExtender e assim mantém sempre visível na tela enão importe o objeto que seja nela.
O que falta?
Para terminar o que foi feito falta sincronizaro JavaScript com o C#.NET. Pois até agora o tempo está rodando na tela e otimer está rodando e contando no C#. Quando termina o tempo do Timer, énecessário atualizar na tela o contador JavaScript. Para isso no início doartigo, coloquei os códigos inicio()e finalizar() timer.
Quando o contador terminar a contagem e foratualizar o relatório, preciso que seja atualizado o tempo que está rodando viaJavaScript, dessa forma fiz um método que o C#.NET chama o código JavaScript.(Code 6).
|
protected void finalizaTimerJavaScript(Page sender) { string scriptjs = "finalizar();"; ScriptManager.RegisterClientScriptBlock(sender, sender.GetType(), Guid.NewGuid().ToString(), scriptjs, true); } protected void inicioTimerJavaScript(Page sender) { string scriptjs = "inicio();"; ScriptManager.RegisterClientScriptBlock(sender, sender.GetType(), Guid.NewGuid().ToString(), scriptjs, true); } |
Code 6
Estes dois métodos são específicos para chamar funçõesescritas em JavaScript pelo C#.NET.
Na hora de gerar o relatório, eu chamo o métodoinicioTimerJavaScript passando oparâmetro correto que é a página. Exemplo (Code 7)
|
protected void cmdGerarRelatorio_Click(object sender, EventArgs e) { if (Page.IsValid) { try { GerarRelatorio(); Timer1.Enabled = true; pnlClock.Visible = true; inicioTimerJavaScript(this.Page); } catch (Exception ex) { throw ex; } } } |
Code 7
Note que habilito o Timer1, mostro o painelClock e inicio a contagem chamando o método inicioTimerJavaScript(this.Page).Automaticamente a página inicia o contador.
No caso de querer atualizar a página clicandoem algum outro botão, ou recarregando a página basta finalizar o tempo nojavascript. (Code 8).
|
protected void cmbAgencia_SelectedIndexChanged(object sender, EventArgs e) { finalizaTimerJavaScript(this.Page); } |
Code 8.
Neste caso, ao selecionar uma comboautomaticamente o clock sumirá e será finalizado o tempo javascript na tela.
Espero ter ajudado e qualquer dúvida podeentrar em contato.
Sign up to our newsletter
Receive our latest updates about programming languages, software, database, books, ebooks, classes, jobs and more.
