Demonstra Passo a passo: Usando o controle Timer do ASP.NET com vários controles UpdatePanel

Artigo
10/15/2014

Nessa explicação passo a passo você usará um controle Timer para atualizar o conteúdo de dois controles UpdatePanel.O controle Timer será posicionado fora de dois controles UpdatePanel e ele será configurado como um disparador para os ambos os painéis.

Pré-requisitos

Para implementar os procedimentos nessa explicação passo a passo, você precisará:

Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express Edition.
Um site da Web ASP.NET habilitado para AJAX.

Para atualizar controles UpdatePanel controles em intervalo regulares

Crie uma nova página e alterne para modo de Design.
Se a página ainda não contiver um controle ScriptManager, na guia Extensões de AJAXda caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.

Na caixa de ferramentas, clique duas vezes no controle Timer para adicioná-lo à página da Web.

Observação:
O controle Timer pode funcionar como um disparador tanto dentro ou fora de um controle UpdatePanel.Este exemplo mostra como usar o controle Timer fora de um controle UpdatePanel.Para obter um exemplo de como usar um controle Timer dentro de um controle UpdatePanel, consulte Demonstra Passo a passo: Introdução ao controle Timer.

Na caixa de ferramentas, clique duas vezes no controle UpdatePanel para adicionar um painel para a página e defina sua propriedade UpdateMode como Conditional.
Clique duas vezes no controle UpdatePanel novamente para adicionar um segundo painel para a página e, em seguida, defina sua propriedade UpdateMode como Conditional.
Clique dentro do controle UpdatePanel chamado UpdatePanel1 e na guia Standard da caixa de ferramentas, clique duas vezes o controle Label para adicioná-lo ao UpdatePanel1.
conjunto Text propriedade para UpdatePanel1 não atualizado ainda.
Adicione um controle Label a UpdatePanel2.
conjunto Text propriedade para UpdatePanel2 não atualizado ainda.

Defina a propriedade Interval do Timer para 10000.

A propriedade Interval é definida em milissegundos, de modo que a configuração da propriedade Interval como 10.000 milissegundos atualizará os controles UpdatePanel a cada 10 segundos.

Observação:
Nesse exemplo, o intervalo de timer é definido como 10 segundos.Dessa forma, quando você executar o exemplo, não é necessário que você espere um longo tempo para ver os resultados.No entanto, cada intervalo de timer causa um postback para o servidor e causa tráfego de rede.Portanto, em um aplicativo de produção você deve definir o intervalo para a hora mais longa que é ainda prático para o seu aplicativo.

Nesse exemplo, o intervalo de timer é definido como 10 segundos.Dessa forma, quando você executar o exemplo, não é necessário que você espere um longo tempo para ver os resultados.No entanto, cada intervalo de timer causa um postback para o servidor e causa tráfego de rede.Portanto, em um aplicativo de produção você deve definir o intervalo para a hora mais longa que é ainda prático para o seu aplicativo.

Clique duas vezes no controle Timer para criar um manipulador para o evento Tick.

Adicione código ao manipulador que define a propriedade Text dos controles Label1 e Label2 para a hora atual.

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Label1.Text = "UpdatePanel1 refreshed at: " & _
          DateTime.Now.ToLongTimeString()
        Label2.Text = "UpdatePanel2 refreshed at: " & _
          DateTime.Now.ToLongTimeString()
    End Sub
End Class

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "UpdatePanel1 refreshed at: " +
          DateTime.Now.ToLongTimeString();
        Label2.Text = "UpdatePanel2 refreshed at: " +
          DateTime.Now.ToLongTimeString();
    }
}

Especifique Timer1 como o disparador para UpdatePanel1 e UpdatePanel2 adicionando um controle AsyncPostBackTrigger para ambos os controles UpdatePanel.Você pode fazer isso declarativamente conforme mostrado no código o seguir:

<Triggers>
  <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>

O exemplo a seguir mostra a marcação para a página completa.

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <div>
            <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000">
            </asp:Timer>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="UpdatePanel1 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label2"  Text="UpdatePanel2 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>

    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <div>
            <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000">
            </asp:Timer>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="UpdatePanel1 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label2"  Text="UpdatePanel2 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>

    </form>
</body>
</html>

Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.
Espere pelo menos 10 segundos até que os controles UpdatePanel sejam atualizados.

Os dois painéis mostram a hora quando atualizado.

Revisão

Essa explicação passo a passo mostrou como usar um controle Timer com vários controles UpdatePanel para permitir atualizações parciais de página.Você deve adicionar um controle ScriptManager e, em seguida, adicionar os controles UpdatePanel.Um controle Timer atualiza o conteúdo dos painéis ao configurá-lo como um disparador para os painéis.

Para obter informações adicionais sobre como usar um controle Timer dentro de um controle UpdatePanel, consulte Demonstra Passo a passo: Introdução ao controle Timer.