Tutorials

Animating ASP.NET UpdatePanel Controls

Introduction

This tutorial describes how to animate an UpdatePanel control that was updated as a result of the most recent postback.

The PageRequestManager class in the Microsoft AJAX Library enables you to manage events in the client page life cycle. You do this by handling client events of the PageRequestManager class. In this tutorial, you will see how to use the beginRequest and pageLoaded events to animate an UpdatePanel control when a specific control on the page causes an asynchronous postback. The beginRequest event is raised before an asynchronous postback starts and before the postback is sent to the server. The pageLoaded event is raised during postbacks and asynchronous postbacks. During this event, you can access information about what panels where created and updated as a result of the most recent postback. (For postbacks, panels are only created, but for asynchronous postbacks, panels can be both created and updated.)

You can see the code in action in this tutorial by clicking the Run It buttons. To implement the procedures in your own development environment you need:

Microsoft Visual Studio 2005 or Visual Web Developer Express Edition.
The latest release of Microsoft ASP.NET AJAX installed and configured. For more information, see Installing ASP.NET AJAX.
An Microsoft ASP.NET AJAX Web site.

Creating Script that Animates an UpdatePanel

In this procedure you will create an ECMAScript (JavaScript) file that defines an animation class. The class contains a method that animates an HTML DOM element. In the browser, the UpdatePanel control that you want to animate is represented as a <div> element.

To create JavaScript that animates an UpdatePanel control

In the ASP.NET AJAX Web site, add a JScript file and name it UpdatePanelAnimation.js.

Add the following JavaScript code to the file.

CS

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

VB

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

The code performs the following tasks:

Registers the ScriptLibrary namespace by calling the registerNamespace method.
Uses the prototype design pattern to define the BorderAnimation class in the ScriptLibrary namespace. A method named animatePanel in the BorderAnimation class defines the animation logic.
Registers the BorderAnimation class by calling the registerClass method.
Instantiates a new instance of the BorderAnimation class. The code passes three values to the class constructor: an animation color, a default color, and the number of milliseconds to display the animation color.
Defines a handler for the load event of the Sys.Application class. This class in turn defines handlers for the beginRequest and pageLoaded events of the PageRequestManager class.
In the beginRequest event handler, the code saves the name of the element that caused the postback.
If the ID of the postback element contains the word "animate", the code performs the animation in the pageLoaded event handler.

Using the Script with an UpdatePanel Control

In this procedure you will use the animation script you created in a page that contains an UpdatePanel control. The script animates the panel when the panel's contents are refreshed.

To animate an UpdatePanel control

Create a new page and switch to Design view.
In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.
In the toolbox, double-click the UpdatePanel control to add an UpdatePanel control to the page.
Click inside the UpdatePanel control and then in the Standard tab of the toolbox, double-click the Button control two times to add two buttons to the UpdatePanel control.
Set the first button's Text property to Refresh with Animation and its ID to AnimateButton1.
Set the second button's Text property to Refresh with no Animation. Leave its ID as the default value of Button2.

Switch to Source view and add the following style rules in a <style> block in the <head> element of the page.

CS

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

VB

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

The style rules define the height, width, and border of the <div> element that is rendered for the UpdatePanel control.

Add the following code inside the <ContentTemplate> element of the <asp:UpdatePanel> element.

CS
```
<%=DateTime.Now.ToString() %>
```
VB
```
<%=DateTime.Now.ToString() %>
```
The code displays the time when the markup was most recently rendered.
Switch to Design view and select the ScriptManager control.
In the Properties window, select the Scripts property and click the ellipsis (…) button to display the ScriptReference Collection Editor dialog box.
Click Add to add a script reference.
Set the Path property of the script reference to UpdatePanelAnimation.js, which is the JavaScript file that you created previously.

You add a script reference using the Scripts collection of the ScriptManager to make sure that the script is loaded after the code for the Microsoft AJAX Library has loaded.
Click OK to close the ScriptReference Collection Editor dialog box.
Save your changes and press CTRL+F5 to view the page in a browser.
Click the Refresh button to refresh the panel.

Note that the border of the panel changes color briefly.

Run View

Review

This tutorial showed how to provide a simple animation for an UpdatePanel control when the panel's contents are refreshed. The code to animate the HTML <div> element that is rendered by the UpdatePanel control is defined in a JavaScript file. The JavaScript file is added to the Scripts collection of the ScriptManager control. The main logic in the script file is defined in the handlers for the beginRequest and pageLoaded events of the PageRequestManager class.

Documentation for: ASP.NET Ajax Version 1.0