Refresh automático ou execução de script em ciclos

Durante o desenvolvimento de muitos sistemas web nos deparamos com as seguintes situações:
  • Página dar refresh automaticamente a cada x segundos;
  • Executar um bloco de script (JavaScript) a cada x segundos;
  • Executar um bloco de código (ASP.NET) a cada x segundos sem refresh na página.
Creio que são essas as principais situações que são mais comumentes buscadas afim de atingir o objetivo de atualização automática. Pois bem, nesse artigo irei demonstrar como solucioná-las de maneira rápida e eficaz.

Situação 1: Atualizar página automacatimente

Para essa situação, que é a mais simples, basta inserir a seguinte tag no head da página especificando a quantidade de segundos que deve aguardar para dar o refresh:

<META HTTP-EQUIV="Refresh"
CONTENT="10;URL=http://thiagomarcal.blogspot.com">

Situação 2: Executar uma função JavaScript a cada x segundos

Se derem uma olhada no post anterior do chat, verão que uso uma função chamada setTimeout() que irá registrar qual função irá executar e qual o tempo de espera. Então, coloque o seguinte código JS:

window.onload = function() {
    setTimeout("FuncaoJS()", 10000);
}
 
function FuncaoJS(){
    // Instruções
    setTimeout("FuncaoJS()", 10000);
}

De forma similar, pode-se usar também a função setInterval().

Situação 3: Executar um método ASP.NET a cada x segundos sem dar refresh

Já para o ASP.NET podemos usar o AJAX. Para isso utilizaremos um Timer e um UpdatePanel. Na página, adicione o ScriptManager e insira o Timer dentro do ContentTemplate do UpdatePanel. Atribua um método no evento OnTick do Timer ficando da seguinte forma:

<Ajax:ScriptManager ID="ScriptManagerAjax" runat="server">
</Ajax:ScriptManager>
<Ajax:UpdatePanel ID="Painel" runat="server">
<ContentTemplate>
<Ajax:Timer ID="Temporizador" runat="server" Interval="10000" OnTick="ExecutaScript_Tick">
</Ajax:Timer>
</ContentTemplate>
</Ajax:UpdatePanel>

Se você deixar o Timer fora do UpdatePanel ele irá realizar a execução do bloco de script, mas irá dar PostBack e, consequentemente, refresh na página. Por isso, e mais amigável, deve-se deixar dentro.
Agora basta criar o método no Code-Behind contendo o código a ser executado:

protected void ExecutaScript_Tick(object sender, EventArgs e)
{
}

Tranquilo, né?

1 comentários:

Alex disse...

Obrigado champs!

Postar um comentário