Introducción al control UpdateProgress

  • Artículo

Actualización: noviembre 2007

En este tutorial, usará controles UpdateProgress para mostrar el progreso de las actualizaciones parciales de página. Si una página contiene controles UpdatePanel, también puede incluir controles UpdateProgress para mantener a los usuarios informados sobre el estado de las actualizaciones parciales de página. Puede usar un control UpdateProgress para representar el progreso de las actualizaciones parciales de la página entera. También puede incluir un control UpdateProgress para cada control UpdatePanel. En este tutorial, se muestran ambos modelos.

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.

Usar un único control UpdateProgress

Para empezar, usará un único control UpdateProgress que muestre el progreso de todas las actualizaciones parciales de página en la página.

Para usar un único control UpdateProgress para toda la página

  1. Cree una nueva página y pase a la vista Diseño.

  2. En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página.

  3. Haga doble clic en el control UpdatePanel para agregarlo a la página.

  4. Haga doble clic en el control UpdateProgress para agregarlo a la página.

  5. Dentro del control UpdateProgress, agregue el texto Procesando….

  6. Dentro del control UpdatePanel agregue un control Label y un control Button.

  7. Establezca la propiedad Text del control Label en Representación de página inicial.

  8. Haga doble clic en el control Button a fin de agregar un controlador para el evento Click del botón.

  9. Agregue el código siguiente al controlador de Click, que crea artificialmente un retraso de tres segundos y, a continuación, muestra la hora actual.

    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();       
}
    Nota:

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

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

  11. Haga clic en el botón.

    Después de un pequeño retraso, se muestra el mensaje de progreso. Cuando el controlador del evento Click finaliza, se oculta el mensaje de progreso y se actualiza la hora que se muestra en el panel.

    Este ejemplo se ha adaptado para mostrar mejor la región de la página que UpdatePanel representa.

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

Usar varios controles UpdateProgress

Un control UpdateProgress de la página puede mostrar un mensaje de progreso para todos los controles UpdatePanel de la página. Las devoluciones de datos asincrónicas que se originan dentro de un control UpdatePanel hacen que el control UpdateProgress muestre su mensaje. Las devoluciones de datos de controles que son desencadenadores del panel también muestran el mensaje.

Puede asociar el control UpdateProgress con un único control UpdatePanel; para ello, establezca la propiedad AssociatedUpdatePanelID del control de progreso. En este caso, el control UpdateProgress muestra un mensaje sólo cuando una devolución de datos se origina dentro del control UpdatePanel asociado.

En el procedimiento siguiente, se agregan dos controles UpdateProgress a una página, cada uno de ellos asociado con un control UpdatePanel diferente.

Para usar varios controles UpdateProgress en una página

  1. Cree una nueva página y pase a la vista Diseño.

  2. En la ficha Extensiones AJAX del cuadro de herramientas, haga doble clic en el control ScriptManager para agregarlo a la página.

  3. Haga doble clic en el control UpdatePanel dos veces para agregar dos instancias del control a la página.

  4. En cada control UpdatePanel, agregue un control Label y un control Button.

  5. Establezca la propiedad Text de ambos controles Label en Panel representado inicialmente.

  6. Haga doble clic en cada control Button para agregar un controlador para el evento Click de cada botón.

  7. Agregue el código siguiente a cada controlador Click, que crea artificialmente un retraso de tres segundos y, a continuación, muestra la hora actual.

    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();       

}

  8. Cambie a la vista Diseño.

  9. Haga clic dentro del primer control UpdatePanel y agregue un control UpdateProgress.

  10. Dentro del control UpdateProgress, agregue el texto Panel1 actualizándose.

    De esta forma, se establece la propiedad ProgressTemplate.

  11. Seleccione el control UpdateProgress y, en la ventana Propiedades, establezca la propiedad AssociatedUpdatePanelID en UpdatePanel1.

  12. Haga clic dentro del segundo control UpdatePanel y agregue un segundo control UpdateProgress.

  13. Establezca el texto del control UpdateProgress en Panel2 actualizándose y establezca su propiedad AssociatedUpdatePanelID en UpdatePanel2.

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

  15. Haga clic en el botón del primer panel.

    Después de un pequeño retraso, se mostrará el mensaje de progreso asociado al primer panel. El otro control UpdateProgress no se muestra.

  16. Haga clic en el botón del segundo panel.

    Se mostrará el mensaje de progreso asociado al segundo panel.

    Nota:

    De forma predeterminada, al iniciar una nueva devolución de datos asincrónica mientras hay una devolución anterior en curso, se cancela la primera devolución de datos. Para obtener más información, vea Dar prioridad a una devolución de datos asincrónica específica.

    Este ejemplo se ha adaptado para mostrar mejor la región de la página que UpdatePanel representa.

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

Repaso

En este tutorial se han mostrado dos formas de usar el control UpdateProgress. La primera consiste en agregar a la página un control UpdateProgress que no esté asociado con ningún control UpdatePanel determinado. En este caso, el control muestra un mensaje de progreso para todos los controles UpdatePanel. La segunda forma consiste en agregar varios controles UpdateProgress y asociar cada uno ellos a un control UpdatePanel diferente.

Vea también

Tareas

Introducción al control UpdatePanel

Conceptos

Información general sobre el control UpdateProgress

Información general sobre la representación parcial de páginas

Referencia

UpdateProgress

UpdatePanel