Introdução ao Controle UpdateProgress

Artigo
10/15/2014

Neste tutorial, você usará controles UpdateProgress para exibir o andamento de atualizações parciais de página.Se uma página contiver controles UpdatePanel, você também pode incluir controles UpdateProgress para manter os usuários informados sobre o status das atualizações parciais da página.Você pode usar um controle UpdateProgress para representar o progresso da atualização parcial de página para a página inteira.Como alternativa, você pode incluir um controle UpdateProgress de cada controle UpdatePanel.Ambos esses padrões são mostrados neste tutorial.

Pré-requisitos

Para implementar os procedimentos no seu próprio ambiente de desenvolvimento você precisa:

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

Usando um único Controle UpdateProgress

Você começará usando um único controle UpdateProgress para mostrar o progresso para todas as atualizações parciais de página na página.

Para usar um único controle UpdateProgress para a página inteira

Crie uma nova página e alterne para modo de Design.
Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.
Clique duas vezes no controle UpdatePanel para adicioná-lo à página.
Clique duas vezes no controle UpdateProgress para adicioná-lo à página.
Dentro de UpdateProgress controle, adicione o texto Processing….
Dentro do controle UpdatePanel adicione um controle Label e um controle Button .
conjunto o Text propriedade das Label controlar o renderizados inicial da página.
Clique duas vezes no controle Button para adicionar um manipulador para o botão do evento Click.

Adicione o seguinte código ao manipulador Click, que cria artificialmente um atraso de três segundos e, em seguida, exibe a hora atual.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

Observação:
O manipulador para o evento Click introduz intencionalmente um atraso para este tutorial.Na prática, você poderia não introduzir um atraso.Em vez disso, o atraso deve ser o resultado do tráfego do servidor ou do código que demora para processar, como uma consulta ao banco de dados de execução demorada .

Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.

Clique no botão.

Após um pequeno intervalo, a mensagem de progresso é exibida.Quando o manipulador para o evento Click tiver terminado, a mensagem de progresso estará oculta e o tempo exibido no painel é atualizado.

O exemplo é estilizado para melhor apresentar a região da página que representa o UpdatePanel.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

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

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    protected void Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

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

Usando Vários Controles UpdateProgress

Um controle UpdateProgress na página pode mostrar uma mensagem de progresso para todos os controles UpdatePanel na página.Postagens assíncronas originadas dentro de um controle UpdatePanel força o controle UpdateProgress a exibir sua mensagem.Postagens de controles que são disparadores para o painel também exibem a mensagem.

Você pode associar o controle UpdateProgress a um único controle UpdatePanel definindo o andamento do controle de propriedades AssociatedUpdatePanelID.Nesse caso, o controle UpdateProgress exibe uma mensagem somente quando um postback se origina dentro do controle UpdatePanel associado.

No próximo procedimento, dois controles UpdateProgress são adicionados a uma página, cada um associado a um outro controle UpdatePanel.

Para usar vários controles UpdateProgress em uma página

Crie uma nova página e alterne para modo de Design.
Na guia Extensões AJAX da caixa de ferramentas, clique duas vezes no controle ScriptManager para adicioná-lo à página.
Dê dois cliques duas vezes no controle UpdatePanel para adicionar duas instâncias do controle à página.
Em cada controle UpdatePanel, adicione um controle Label e um controle Button .
conjunto o Text propriedade de ambos Label controles de painel inicialmente processados.
Clique duas vezes em cada controle Button para adicionar um manipulador para cada botão do evento Click.

Adicione o seguinte código ao manipulador Click, que cria artificialmente um atraso de três segundos e, em seguida, exibe a hora atual.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

protected void Button2_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label2.Text = "Page refreshed at " +
        DateTime.Now.ToString();       

}

Alternar para modo Design.
Clique dentro do primeiro controle UpdatePanel e adicione um controle UpdateProgress.
Dentro de UpdateProgress controle, adicione o texto Painel1 atualizando.

Isso define a propriedade ProgressTemplate.
selecionar o UpdateProgress controle e, na janela Propriedades, defina o AssociatedUpdatePanelID propriedade para UpdatePanel1.
Clique dentro do segundo controle UpdatePanel e adicione um segundo controle UpdateProgress.
conjunto o texto do UpdateProgress o controle para Painel2 atualizando e defina seu AssociatedUpdatePanelID propriedade para UpdatePanel2.
Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.
Clique no botão no primeiro painel.

Após um pequeno intervalo, a mensagem de progresso associada com o primeiro painel é exibida.O outro controle UpdateProgress não será exibido.

Clique no botão no segundo painel.

A mensagem de progresso associada com o segundo painel é exibida.

Observação:
Por padrão, iniciando um novo postback assíncrono enquanto um anterior está em andamento cancela a primeira postagem.Para obter mais informações, consulte Fornecer precedência para um postback assíncrono específico.

O exemplo é estilizado para melhor apresentar a região da página que representa o UpdatePanel.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2"  Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2"  AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    protected void Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label2.Text = "Page refreshed at " +
            DateTime.Now.ToString();       

    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2"  Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2"  AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

Revisão

Este tutorial introduziu duas maneiras para usar o controle UpdateProgress.A primeira maneira é adicionar um controle UpdateProgress na página que não está associada com qualquer controle UpdatePanel específico.Nesse caso, o controle mostra uma mensagem de progresso para todos os controles UpdatePanel.A segunda maneira para usar o controle de andamento é adicionar vários controles UpdateProgress e associar cada um com um controle UpdatePanel diferente.

Consulte também

Compartilhar via

Introdução ao Controle UpdateProgress

Pré-requisitos

Usando um único Controle UpdateProgress

Para usar um único controle UpdateProgress para a página inteira

Usando Vários Controles UpdateProgress

Para usar vários controles UpdateProgress em uma página

Revisão

Consulte também

Tarefas

Conceitos

Referência

Recursos adicionais