Programando controles UpdateProgress no script de cliente

Artigo
10/15/2014

Neste tutorial, você estenderá o controle UpdateProgress com o comportamento do cliente escrevendo código ECMAScript (JavaScript).Seu código irá usar a classe PageRequestManager que faz parte de Microsoft AJAX Library.No controle UpdateProgress, você adicionará um botão que permite aos usuários cancelar uma postagem assíncrona.Como parte desta tarefa, você mostrará ou ocultará a mensagem de progresso usando script de cliente.

Este tópico pressupõe que você é familiarizado com o controle UpdateProgress.Caso contrário, examine o tópico Introdução ao Controle UpdateProgress.

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.

Para cancelar uma postagem assíncrona em script de cliente

Crie uma nova página Web ASP.NET e alterne para a tela de Design.
Na guia Extensões Ajax da caixa de ferramentas, clique duas vezes no controle ScriptManager, o controle UpdatePanel e os controles UpdateProgress para adicionar uma instância de cada uma à página.
From a Padrão guia da caixa de ferramentas, adicione um Label o controle para o UpdatePanel controlar e conjunto o rótulo Text propriedade para o painel processados.
Adicionar um Button o controle para o UpdatePanel controlar e conjunto seus Text propriedade para atualização.
No UpdateProgress controle, adicione o texto Processing….
From a HTML guia da caixa de ferramentas, adicione um HtmlButton o controle para o UpdateProgress controlar e conjunto seus Value o atributo para cancelar.
clicar duas vezes no botão Atualizar para adicionar um manipulador de eventos para o seu Click evento.

Adicione o seguinte código ao manipulador Click, que artificialmente cria um atraso de três segundos e, em seguida, define o rótulo para a hora atual do servidor.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = 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 .

Sob o elemento <asp:ScriptManager>, adicione o seguinte script:

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

O script obtém a instância atual da classe PageRequestManager.Em seguida, crie uma função que chama o método abortPostBack para interromper uma postagem assíncrona.

Defina o atributo onclick do controle HtmlButton para CancelAsyncPostBack, o nome do manipulador que você criou na etapa anterior.

<input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

<input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

Adicione o seguinte bloco de estilo para o elemento <head>:

<style type="text/css">    
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

<style type="text/css">
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

As definições de estilo configuram o controle UpdateProgress para ser exibido no canto inferior esquerdo da janela do navegador.

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

A mensagem de progresso aparece após um pequeno atraso.Permita que a atualização página-parcial conclua para que a mensagem no controle UpdatePanel seja alterada para exibir a hora.

Observação:

Você pode configurar o tempo para o atraso, definindo a propriedade DisplayAfter.O valor padrão é 500 milissegundos.

Observação:
Você pode configurar o tempo para o atraso, definindo a propriedade DisplayAfter.O valor padrão é 500 milissegundos.

clicar atualizar novamente e clicar imediatamente em ' Cancelar ' para parar a atualização de página parcial.

Observe que o tempo em UpdatePanel não é atualizado.

<%@ 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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">    
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button2"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

Exibindo progresso de atualização usando script de cliente

Nas seguintes situações, o controle UpdateProgress não exibirá automaticamente:

O controle UpdateProgress está associado a um painel de atualização específica, mas os resultados de uma postagem assíncrona de um controle que não está dentro desse painel de atualização.
O controle UpdateProgress não está associado com qualquer controle UpdatePanel, e a postagem assíncrona não resultará a partir de um controle que não está dentro de um UpdatePanel e não é um disparador.Por exemplo, a atualização é executada no código.

O procedimento a seguir mostra como exibir um controle UpdateProgress quando a postagem assíncrona não se origina dentro do controle UpdatePanel associado.Esse procedimento presume que você tenha concluído a primeira parte deste tutorial.

Para exibir um controle UpdateProgress por meio de programação

Na página criada anteriormente, alterne para modo de exibição Design.
Selecione o controle UpdateProgress e na janela Propriedades, defina a propriedade AssociatedUpdatePanelID como UpdatePanel1 .
Adicione um controle Button em qualquer lugar fora dos controles UpdatePanel e UpdateProgress.
conjunto Text propriedade disparar e sua ID de Panel1Trigger.
Selecione o controle UpdatePanel, e na janela propriedades, clique no botão contendo reticências (...) na caixa para a propriedade Triggers.

A caixa de diálogo Editor de Coleção UpdatePanelTrigger é exibida.
criar an AsyncPostBackTrigger objeto e conjunto seus ControlID propriedade para Panel1Trigger.
Clique em OK para fechar o Editor de coleção.
Duplo clicar no botão de disparar para adiciona um manipulador de eventos para o seu Click evento.

Adicione o seguinte código ao manipulador Click, que artificialmente cria um atraso de três segundos.Em seguida, ele exibe a hora do servidor e uma mensagem informando que a postagem foi causada por um disparador.

Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString() & " - trigger"
End Sub

protected void Panel1Trigger_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString() + " - trigger";
}

Em Modo de exibição Source, adicione o seguinte script de cliente sob o bloco <script> já na página.

prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    postBackElement = args.get_postBackElement();
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    postBackElement = args.get_postBackElement();
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

O código faz o seguinte:

Ele define um manipulador para o evento initializeRequestda classe PageRequestManager.O código do manipulador cancela quaisquer postagens assíncronas que já estejam em andamento.Caso contrário, se o postback se origina no Panel1Trigger <div> elemento, o código exibe o UpdateProgress modelo.
Ele define um manipulador para o evento endRequest da classe PageRequestManager.Se o postback se origina no Panel1Trigger <div> elemento, o código do manipulador ocultará o controle do andamento.

O exemplo a seguir mostra o bloco de scripts completo.

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    postBackElement = args.get_postBackElement();
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    postBackElement = args.get_postBackElement();
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

Salve suas alterações e, em seguida, pressione CTRL + F5 para exibir a página em um navegador.
clicar no botão Atualizar.

A mensagem de progresso aparece após um pequeno atraso.Permita que a atualização página-parcial conclua para que a mensagem no controle UpdatePanel exiba a hora.

clicar no botão disparar.

Observe que a mensagem de progresso é exibida.

<%@ 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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
    Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString() & " - trigger"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        var postBackElement;
        function InitializeRequest(sender, args) {
            if (prm.get_isInAsyncPostBack()) {
                args.set_cancel(true);
            }
            postBackElement = args.get_postBackElement();
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Panel1Trigger_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString() + " - trigger";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        var postBackElement;
        function InitializeRequest(sender, args) {
            if (prm.get_isInAsyncPostBack()) {
                args.set_cancel(true);
            }
            postBackElement = args.get_postBackElement();
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>

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

Revisão

Este tutorial mostrou maneiras de você estender o comportamento do controle UpdateProgress escrevendo código JavaScript.Você pode usar os eventos e métodos da classe PageRequestManager para cancelar uma postagem assíncrona e mostrar e ocultar um controle UpdateProgress programaticamente.

Partilhar via

Programando controles UpdateProgress no script de cliente

Pré-requisitos

Para cancelar uma postagem assíncrona em script de cliente

Exibindo progresso de atualização usando script de cliente

Para exibir um controle UpdateProgress por meio de programação

Revisão

Consulte também

Conceitos

Referência

Recursos adicionais