Walkthrough: Animating ASP.NET UpdatePanel Controls

Article
12/04/2014

This walkthrough describes how to animate an UpdatePanel control that was updated as a result of an asynchronous postback.

The Microsoft Ajax Library enables you to manage events in the client page life cycle. You do this by handling events of the client PageRequestManager class. In this walkthrough, 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.)

Prerequisites

To implement the procedures in your own development environment you need:

Visual Studio or .
An AJAX-enabled ASP.NET Web site project or Web application project.

Creating Client Script that Animates an UpdatePanel Control

In this procedure you will create an ECMAScript (JavaScript or JScript) 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 client script that animates an UpdatePanel control

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

Add the following JavaScript code to the file:

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

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.
Creates 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 Client Script with an UpdatePanel Control

In this procedure you will use the animation script 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.
If there is not already a ScriptManager control on the page, drag one from the AJAX Extensions tab of the Toolbox.
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.

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

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:
```
<%=DateTime.Now.ToString() %>
```
```
<%=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 the 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.

<%@ Page Language="VB" %>

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

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

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

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

Review

This walkthrough showed how to provide a simple animation for an UpdatePanel control when the panel's contents are refreshed. Code in a JavaScript file animates the HTML div element that is rendered by the UpdatePanel control. 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.

Share via

Walkthrough: Animating ASP.NET UpdatePanel Controls

Prerequisites

Creating Client Script that Animates an UpdatePanel Control

To create client script that animates an UpdatePanel control

Using the Client Script with an UpdatePanel Control

To animate an UpdatePanel control

Review

See Also

Reference

Concepts

Additional resources