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)
{
pnlClock.Visible = false;
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.