Programar controles UpdateProgress en script de cliente

Artículo
10/22/2014

Actualización: noviembre 2007

En este tutorial extenderá el control UpdateProgress con comportamiento de cliente escribiendo código ECMAScript (JavaScript). Su código usará la clase PageRequestManager que forma parte de Microsoft AJAX Library. En el control UpdateProgress, agregará un botón que permita a los usuarios cancelar una devolución de datos asincrónica. Como parte de esta tarea, mostrará u ocultará el mensaje de progreso mediante script de cliente.

En este tema se supone que está familiarizado con el control UpdateProgress. Si no es así, revise el tema Introducción al control UpdateProgress.

Requisitos previos

Para implementar los procedimientos en su propio entorno de desarrollo, necesitará:

Microsoft Visual Studio 2005 o Visual Web Developer Express.
Un sitio web ASP.NET habilitado para AJAX.

Para cancelar una devolución de datos asincrónica en script de cliente

Cree una nueva página web ASP.NET y cambie a la vista Diseño.
En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager, el control UpdatePanel y los controles UpdateProgress para agregar una instancia de cada uno de ellos a la página.
En la ficha Estándar del cuadro de herramientas, agregue un control Label al control UpdatePanel y establezca la propiedad Text de la etiqueta en Panel representado.
Agregue un control Button al control UpdatePanel y establezca su propiedad Text en Actualizar.
Dentro del control UpdateProgress, agregue el texto Procesando….
En la ficha HTML del cuadro de herramientas, agregue un control HtmlButton al control UpdateProgress y establezca su atributo Value en Cancelar.
Haga doble clic en el botón Actualizar para agregar un controlador de eventos en su evento Click.

Agregue el código siguiente al controlador Click, que crea artificialmente un retraso de tres segundos y, a continuación, establezca la etiqueta en la hora actual del 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();
}

Nota:
El controlador del evento Click aplica de forma intencionada un retraso a este tutorial. En la práctica, no debería incluir un retraso. Si se produce un retraso en este caso, será como resultado del tráfico del servidor o debido a que el código de servidor tarda mucho en tiempo en procesarse, como ocurre con las consultas de base de datos de ejecución prolongada.

Debajo el elemento <asp:ScriptManager>, agregue el script siguiente:

<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>

El script obtiene la instancia actual de la clase PageRequestManager. A continuación, crea una función que llama al método abortPostBack para detener una devolución de datos asincrónica.

Establezca el atributo onclick del control HtmlButton en CancelAsyncPostBack, el nombre del controlador que creó en el paso anterior.

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

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

Agregue el bloque de estilos siguiente al 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>

Los ajustes de estilo configuran el control UpdateProgress que se va a mostrar en la esquina inferior izquierda de la ventana del explorador.

Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.
Haga clic en Actualizar.

El mensaje de progreso aparece después de un pequeño retraso. Permita que finalice la actualización parcial de la página para que el mensaje del control UpdatePanel cambie y muestre la hora.

Nota:

Puede configurar el tiempo de retraso si establece la propiedad DisplayAfter. El valor predeterminado es 500 milisegundos.

Nota:
Puede configurar el tiempo de retraso si establece la propiedad DisplayAfter. El valor predeterminado es 500 milisegundos.

Haga clic de nuevo en Actualizar y, a continuación, haga clic inmediatamente en Cancelar para detener la actualización parcial de la página.

Observe que la hora de UpdatePanel no se actualiza.

<%@ 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>

Mostrar el progreso de actualización con script de cliente

En los escenarios siguientes, el control UpdateProgress no se mostrará automáticamente:

El control UpdateProgress está asociado a un panel de actualización concreto, pero la devolución de datos asincrónica es el resultado de un control que no está dentro de dicho panel de actualización.
El control UpdateProgress no está asociado a ningún control UpdatePanel, y la devolución de datos asincrónica no es el resultado de un control que no está dentro de UpdatePanel y que no es un desencadenador. Por ejemplo, la actualización se realiza en código.

El procedimiento siguiente explica cómo mostrar un control UpdateProgress cuando la devolución de datos asincrónica no se origina dentro del control UpdatePanel asociado. Este procedimiento supone que ha completado la primera parte de este tutorial.

Para mostrar un control UpdateProgress mediante programación

En la página que creó anteriormente, cambie a la vista Diseño.
Seleccione el control UpdateProgress y, en la ventana Propiedades, establezca la propiedad AssociatedUpdatePanelID en UpdatePanel1.
Agregue un control Button en cualquier ubicación fuera de los controles UpdatePanel y UpdateProgress.
Establezca la propiedad Text del botón en Trigger y su identificador en Panel1Trigger.
Seleccione el control UpdatePanel y, en la ventana Propiedades, haga clic en el botón de puntos suspensivos (…) del cuadro correspondiente a la propiedad Triggers.

Se mostrará el cuadro de diálogo Editor de la colección UpdatePanelTrigger.
Cree un objeto AsyncPostBackTrigger y establezca su propiedad ControlID en Panel1Trigger.
Haga clic en Aceptar para cerrar el editor de la colección.
Haga doble clic en el botón Trigger para agregar un controlador de eventos en su evento Click.

Agregue el código siguiente al controlador Click, que crea artificialmente un retraso de tres segundos. A continuación muestra la hora del servidor y un mensaje que indica que la devolución de datos ha sido provocada por un desencadenador.

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";
}

En la vista Código fuente, agregue el siguiente script de cliente bajo el bloque <script> ya incluido en la 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';
    }
}

El script realiza las siguientes acciones:

Define un controlador para el evento initializeRequest de la clase PageRequestManager. El código del controlador cancela cualquier devolución de datos asincrónica que ya esté en curso. De lo contrario, si la devolución de datos se origina en el elemento Panel1Trigger<div>, el código muestra la plantilla UpdateProgress.
Define un controlador para el evento endRequest de la clase PageRequestManager. Si la devolución de datos se origina en el elemento Panel1Trigger<div>, el código del controlador oculta el control de progreso.

En el ejemplo siguiente se muestra el bloque de script 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>

Guarde los cambios y presione CTRL+F5 para ver la página en un explorador.
Haga clic en el botón Actualizar.

El mensaje de progreso aparece después de un pequeño retraso. Permita que finalice la actualización parcial de la página para que el mensaje del control UpdatePanel muestre la hora.

Haga clic en el botón Trigger.

Observe que se muestra el mensaje de progreso.

<%@ 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>

Revisión

En este tutorial se han mostrado métodos para extender el comportamiento del control UpdateProgress escribiendo código JavaScript. Puede usar los eventos y métodos de la clase PageRequestManager para cancelar una devolución de datos asincrónica y para mostrar y ocultar un control UpdateProgress mediante programación.

Compartir a través de

Programar controles UpdateProgress en script de cliente

Requisitos previos

Para cancelar una devolución de datos asincrónica en script de cliente

Mostrar el progreso de actualización con script de cliente

Para mostrar un control UpdateProgress mediante programación

Revisión

Vea también

Conceptos

Referencia

Recursos adicionales