Updatepanel is one of the most widely used control of Ajax. As we know it will used for Partial Page rendering. Did you know, that when an Updatepanel control perform an asynchronous AJAX callback to the server to update its content, the request contain everything a conventional ASP.Net postback contains, including View State. Most developer assume that AJAX eliminates view state, but this is not the case.
If you are using Updatepanel control, you need to know what you are getting in to. In many cases, for a performance point of view an application is better off not using Updatepanel and instead using asynchronous call to WebMethods or PageMethods. Doing so can reduce the volume of data travelling over the wire by an order of magnitude or more.
Here I have tried to taking a closer look at how we can customize it, optimized it and even live without it.
Updatepanel works its magic by converting postback into asynchronous callbacks (XML-HTTP) requests and using Javascript on the client to refresh or repaint the part of the page encapsulated by the updatepanel control. The flashing and flickering goes away because browser does not does not repaint the page as it does during postback.
Sys.WebForms.PageRequestManager class in Microsoft Ajax library (the library of Javascript classed) is most important class managed the asynchronous callback launched by Updatepanel. It is also responsible to updating the content inside an Updatepanel while an asynchronous callback completes.
How to customize UpdatePanel :
For an example : Client wants to highlight the Updated contents inside the Updatepanel.
PageRequestManager fires events in the browser before and after an update occurs. You can hook these events in Javascript and run the code that draw user's attention to the Updated content. The key event is named pageLoaded. This events fires each time the page loads in browser (it is analogous to Page_load event of ASP.Net). It also fires each time an asynchoronous callback launches on behalf of an Updatepanel control completes and the content inside an Updatepanel updated. You can register a Javascript handler for the pageLoad event by just writing two lines of code.
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
The first line acquires a refernece to the page's PageRequestManager object. The second register a Javascript function named as pageLoaded as a handler of pageLoaded events.
When called, a pageLoaded event handler receives an argument of type Sys.WebForm.PageLoadedEventArgs, which is another class in Microsoft Ajax Library. PageLoadedEventArgs contains a get_PanelsUpdated method that you can call to enumerate all the Updatepanels, if any, whose contents are just updated, an updatepanel is nothing more than a DIV on the client-side so you can use Javascript tp flash the DIV, highlight it or do just whatever you want to do to draw a user's attention to it.
Below code shows one way to use pageLoaded event to perform update highlighting. Each time an update occurs, this Javascript flashes the Document Object Model (DOM) elements represening updated UpdatePanels by making them appear and disapper three times in quick succession. The flashing is performed by a helper function named flashPanels, which takes a flash count as an input parameters.
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
var _panels, _count;
var _panels, _count;
function pageLoaded(sender, args)
{
if (_panels != undefined && _panels.length > 0)
{
for (i=0; i < panels =" args.get_panelsUpdated();"> 0)
{
_panels = new Array(panels.length);
for (i=0; i <>
{
_count = (count <<>
for (i=0; i <>
window.setTimeout(toggleVisibility, 50);
}
function toggleVisibility() {
for (i=0; i < _panels[i].set_visible(!_panels[i].get_visible());
if (--_count > 0)
window.setTimeout(toggleVisibility, 50);
}
Note how an updated UpdatePanels visibility is toggeled on and off to create a flashing effect. Rather than interacting with DOM element directly, the code wraps the DOM elements represening the UpdatePanels with Sys.UI .Control's set_visible and get_visible methods to toggel the visibility.
Sys.UI.Controls is a Javascript class found in Microsoft Ajax library specially in MicrosoftAjax.js. The benifit of togglling visibility in this manner is that this is browser independent. This works equally well in every browser that supports ASP.Net Ajax. Javascript code that directly interact with the browser DOM.
