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.