Using the ASP.NET AJAX PageRequestManager to Provide Visual Feedback

ASP.NET AJAX provides an UpdateProgress control that greatly simplifies the process of providing users with visual feedback as asynchronous postback operations occur in AJAX applications.  By using the control you can easily show an image, Flash movie, Silverlight animation, etc. while an AJAX asynchronous postback operation is in process.

In situations where you want more control over the type of visual feedback that is provided to users, you can use the ASP.NET AJAX script library's PageRequestManager client-side class to access the page's life-cycle.  For example, if you want to animate a div tag that wraps an UpdatePanel control each time the UpdatePanel performs a partial-page update, you can hook into the beginRequest and endRequest client-side events to you know when a call is beginning and when it is ending. 

The following script shows how these two events can be used to dynamically change the CSS class assigned to a div tag (that wraps an UpdatePanel) on a timed basis while the UpdatePanel control is updating its content.  In this example, an Animate() method is called which alternates the div's CSS class between one called DottedLines and one called SolidLine every 1/2 second.  This provides users with visual feedback so they can see when one or more UpdatePanel controls are updating.  While this is a fairly straightforward animation example, many more complex (and cool) techniques could be applied.  The ASP.NET AJAX Toolkit has some powerful animation capabilities built-in as well that you may want to take a look at.

Sys.Application.add_init(Init);
var 
intervalID = null;

function 
Init(sender)
{
  
var prm Sys.WebForms.PageRequestManager.getInstance();
  
if (prm)
  {
      
if (!prm.get_isInAsyncPostBack())
      {
            prm.add_beginRequest(BeginRequest)
;
            
prm.add_endRequest(EndRequest);
      
}
  }
}

function BeginRequest(sender,args)
{
    intervalID 
= window.setInterval("Animate()"500);
}

function EndRequest(sender,args)
{
    
window.clearInterval(intervalID);
    
$get("divAnimate").className "Normal";
    
$get("lblLastUpdate").innerHTML = new Date().toLocaleTimeString();
}

function Animate()
{
    
var div $get("divAnimate");
    
div.className GetCssClass(div.className);
}

function GetCssClass(currClass)
{
    
return (currClass=="DottedLines")?"SolidLine":"DottedLines";
}

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

 

comments powered by Disqus

No Comments