Can I test a page that uses Microsoft AJAX Toolkit and UpdatePanels?

SarahOptimost

If you need to make changes to the content within the UpdatePanels, you will need to rerun the code to make these changes everytime the UpdatePanel is updated. (This sort of page is by nature dynamic so a DOM template must be used)
The easiest way to do this is to use the pageLoaded event created by ASP.NET. This runs not only on the first page load, but also when any UpdatePanel is updated. We can add a handler for this event like this:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(runOptimost);

The first line of this returns the instance of the Sys.WebForms.PageRequestManager class for this page, allowing us to call its methods. The second line calls the add_pageLoaded method which adds a function as a handler for the pageLoaded event. This handler is then called any time content on the page is refreshed, whether by a normal browser refresh or by AJAX updating the UpdatePanels. More information on the pageLoaded event can be found here: http://msdn.microsoft.com/en-us/library/bb397523.aspx

The runOptimost function would be a function which runs any of our code that needs to be rerun when the UpdatePanel updates, for example changing the src of a button within the UpdatePanel area.



Sometimes there are multiple UpdatePanels on the page but we may want to run code only if a certain UpdatePanel is updated. For example, if a button click updates a shopping cart on a product page, we may want to fire a counter to track the click.

When the pageLoaded event occurs is called, two arguments are passed to the handler function 'sender' and 'args'. In this case we are only interested in the args, which is an object with some properties we can use to determine what was updated. The panelsUpdated property of the args object contains an array of the ids of the panels that were updated, so if we know the id of the UpdatePanel we care about we can cycle through this array to see if it is in the list. We can get this array by calling args.get_panelsUpdated() - below is an example of how this might be used to fire an image counter only if a certain UpdatePanel is updated:

function opFireCounter(sender, args){
  if(args){
     var updatedPanels = args.get_panelsUpdated();
     for (var i=0; i < updatedPanels.length; i++) {            
      if(updatedPanels.id.indexOf('ctl01_ucMiniCart_m_miniCartUdatePanel')!=-1){
        fireImgCounter();

      }
     }
  }
}

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(opFireCounter);