Documentation for: ASP.NET Ajax Version 1.0

This documentation is for a previous version. For the current released version, see the ASP.NET Ajax documentation on MSDN.

 

 

 

 

 

 

 

Skip Navigation Links.
Tutorials
Sample ASP.NET AJAX Application
ASP.NET AJAX and JavaScript
Extending JavaScript with ASP.NET AJAX
Creating Custom Client Script in ASP.NET AJAX
Dynamically Assigning ASP.NET AJAX Script References
Globalizing a Date by Using Client Script
Embedding a JavaScript File as a Resource in an Assembly
Embedding Localized Resources for a JavaScript File
Adding Localized Resources to a JavaScript File
Creating Custom Client Events
The UpdatePanel Control
Introduction to the UpdatePanel Control
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Using the UpdatePanel Control with Data-Bound Controls
Using the UpdatePanel Control with Master Pages
Using the UpdatePanel Control with User Controls
Using the UpdatePanel Control with a Web Service
Customizing Error Handling for UpdatePanel Controls
Animating UpdatePanel Controls
Canceling an Asynchronous Postback
Giving Precedence to a Specific Asynchronous Postback
Working with PageRequestManager Events
The UpdateProgress Control
Introduction to the UpdateProgress Control
Programming UpdateProgress Controls in Client Script
The Timer Control
Introduction to the Timer Control
Using the Timer Control with Multiple UpdatePanel Controls
ASP.NET Application Services
Using Forms Authentication
Using Profile Information
Web Services
Exposing Web Services to Client Script
Calling Web Services from Client Script
ASP.NET AJAX Extensibility
Creating Custom ASP.NET AJAX Non-Visual Client Components
Creating Custom ASP.NET AJAX Client Controls
Creating an Extender Control
Adding Client Capabilities to a Web Server Control
Creating a Client Component Class Using the Prototype Model
Defining Custom Component Properties and Raising PropertyChanged Events
Releasing Component Resources

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

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

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

  1. Create a new page and switch to Design view.

  2. In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page.

    UpdatePanel Tutorial
  3. In the toolbox, double-click the UpdatePanel control to add an UpdatePanel control to the page.

    UpdatePanel Tutorial
  4. 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.

  5. Set the first button's Text property to Refresh with Animation and its ID to AnimateButton1.

    UpdatePanel Tutorial
  6. Set the second button's Text property to Refresh with no Animation. Leave its ID as the default value of Button2.

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

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

  9. Switch to Design view and select the ScriptManager control.

  10. In the Properties window, select the Scripts property and click the ellipsis (…) button to display the ScriptReference Collection Editor dialog box.

  11. Click Add to add a script reference.

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

    UpdatePanel Tutorial
  13. Click OK to close the ScriptReference Collection Editor dialog box.

  14. Save your changes and press CTRL+F5 to view the page in a browser.

  15. Click the Refresh button to refresh the panel.

    Note that the border of the panel changes color briefly.

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.