Share via

Tutorial: Animar controles UpdatePanel de ASP.NET

  • Artículo

Actualización: noviembre 2007

Este tutorial describe cómo animar un control UpdatePanel actualizado como resultado de una devolución de datos asincrónica.

Microsoft AJAX Library permite administrar eventos durante el ciclo de vida de las páginas del cliente. Para ello, administra eventos de la clase PageRequestManager del cliente. En este tutorial, verá cómo se usan los eventos beginRequest y pageLoaded para animar un control UpdatePanel cuando un control específico de la página produce una devolución de datos asincrónica. El evento beginRequest se provoca antes de que se inicie una devolución de datos asincrónica y antes de que la devolución de datos se envíe al servidor. El evento pageLoaded se provoca durante las devoluciones de datos y las devoluciones de datos asincrónicas. Durante este evento, puede obtener acceso a información sobre los paneles que se han creado y actualizado como resultado de la devolución de datos más reciente. (En las devoluciones de datos, los paneles sólo se crean, pero en las devoluciones de datos asincrónicas, los paneles se pueden crear y actualizar.)

Requisitos previos

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

  • Visual Studio 2008 o Visual Web Developer 2008 Express.

  • Un sitio web ASP.NET habilitado para AJAX.

Crear un script de cliente que anime un control UpdatePanel

En este procedimiento creará un archivo ECMAScript (JavaScript o JScript) que define una clase de animación. La clase contiene un método que anima un elemento DOM HTML. En el explorador, el control UpdatePanel que desea animar se representa como un elemento div.

Para crear un script de cliente que anime un control UpdatePanel

  1. En el sitio web de ASP.NET habilitado para AJAX, agregue un archivo JScript y denomínelo UpdatePanelAnimation.js.

  2. Agregue el siguiente código JavaScript al archivo:

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    El código realiza las tareas siguientes:

    • Registra el espacio de nombres ScriptLibrary mediante una llamada al método registerNamespace.

    • Usa el modelo de diseño de prototipos para definir la clase BorderAnimation en el espacio de nombres ScriptLibrary. Un método denominado animatePanel de la clase BorderAnimation define la lógica de animación.

    • Registra la clase BorderAnimation mediante una llamada al método registerClass.

    • Crea una nueva instancia de la clase BorderAnimation. El código pasa tres valores al constructor de la clase: un color de animación, un color predeterminado y el número de milisegundos durante los que mostrar el color de animación.

    • Define un controlador para el evento load de la clase Sys.Application. A su vez, esta clase define controladores para los eventos pageLoaded y beginRequest de la clase PageRequestManager.

    • En el controlador de eventos de beginRequest, el código guarda el nombre del elemento que produjo la devolución de datos.

    • Si el identificador del elemento de devolución de datos contiene la palabra "animate", el código realiza la animación en el controlador de eventos de pageLoaded.

Usar el script de cliente con un control UpdatePanel

En este procedimiento se usará el script de animación en una página que contenga un control UpdatePanel. El script anima el panel cuando se actualiza su contenido.

Para animar un control UpdatePanel

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

  2. Si no existe ningún control ScriptManager en la página, arrastre uno desde la ficha Extensiones AJAX del Cuadro de herramientas.

  3. En el Cuadro de herramientas, haga doble clic en el control UpdatePanel para agregar un control UpdatePanel a la página.

  4. Haga clic dentro del control UpdatePanel y, a continuación, en la ficha Estándar del cuadro de herramientas, haga doble clic en el control Button dos veces para agregar dos botones al control UpdatePanel.

  5. Establezca la propiedad Text del primer botón en Actualizar con animación y su identificador en AnimateButton1.

  6. Establezca la propiedad Text del segundo botón en Actualizar sin animación. Mantenga ID como valor predeterminado de Button2.

  7. Pase a la vista Código fuente y agregue las siguientes reglas de estilo en un bloque style del elemento head de la página.

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    Las reglas de estilo definen el alto, el ancho y el borde del elemento div que se representa para el control UpdatePanel.

  8. Agregue el siguiente código dentro del elemento ContentTemplate del elemento asp:UpdatePanel:

    <%=DateTime.Now.ToString() %>

    <%=DateTime.Now.ToString() %>

    El código muestra la hora a la que se representó por última vez el marcado.

  9. Pase a la vista Diseño y seleccione el control ScriptManager.

  10. En la ventana Propiedades, seleccione la propiedad Scripts y haga clic en el botón de puntos suspensivos (…) para mostrar el cuadro de diálogo Editor de la colección ScriptReference.

  11. Haga clic en Agregar para agregar una referencia de script.

  12. Establezca la propiedad Ruta de acceso de la referencia de script en UpdatePanelAnimation.js, que es el archivo JavaScript creado previamente.

    La referencia de script se agrega mediante la colección Scripts de ScriptManager para asegurarse de que el script se carga después de que se haya cargado el código de Microsoft AJAX Library.

  13. Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de la colección ScriptReference.

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

  15. Haga clic en el botón Actualizar para actualizar el panel.

    Observe que el borde del panel cambia de color brevemente.

    <%@ Page Language="VB" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

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

Repaso

En este tutorial se ha mostrado cómo proporcionar una animación simple a un control UpdatePanel cuando se actualiza el contenido del panel. El código de un archivo JavaScript anima el elemento HTML div que se representa mediante el control UpdatePanel. El archivo JavaScript se agrega a la colección Scripts del control ScriptManager. La lógica principal del archivo de script se define en los controladores de los eventos pageLoaded y beginRequest de la clase PageRequestManager.

Vea también

Conceptos

Trabajar con eventos de PageRequestManager

Referencia

Sys.WebForms.PageRequestManager (Clase)

Sys.WebForms.PageLoadedEventArgs (Clase)