How to create a complete AJAX Server Control. Part 6.

Posted on Updated on

This is the last (planned) post for the series is related to using the control inside an update panel.

You can access the previous ones here:

When you put a control inside an UpdatePannel (with UpdateMode = “Conditional” ) what it happens is that the de AJAX Framework will call the implementation of the methods in the interface Sys.IDisposable to release the resources before destroying everything inside it using the dispose() method. And once the result is returned from the server, the control gets constructed and initialised again with the initialize() method.

It’s important to do that to avoid side effects and help the system with the garbage collection and avoid memory leaks.

ShoppingCart.js

// As the control implements Sys.IDisposable, the MS Ajax Framework requires of this method.
$ShoppingCart.prototype.initialize = function()
{
	$ShoppingCart.callBaseMethod(this, "initialize");
	this._addHandlers();
}
// As the control implements Sys.IDisposable, the MS Ajax Framework requires of this method.
// This method will be use release used resources (specially required to work with Update Panels)
$ShoppingCart.prototype.dispose = function()
{
	$ShoppingCart.callBaseMethod(this, 'dispose');
	this._clearHandlers();
}
$ShoppingCart.prototype._addHandlers = function()
{
	$addHandlers(this._cartImage, {
		dblclick: Function.createDelegate(this, this._cartDoubleClick)
	});
	$addHandlers(this._infoImage, {
		click: Function.createDelegate(this, this._infoImageClick)
	});
	$addHandlers(this._closeItemsImage, {
		click: Function.createDelegate(this, this._closeItemsImageClick)
	});
}
$ShoppingCart.prototype._clearHandlers = function()
{
	// remove event handlers to avoid memory leaks
	$clearHandlers(this._cartImage);
	$clearHandlers(this._infoImage);
	$clearHandlers(this._closeItemsImage);
}

Once these methods are correctly called, we can put our control inside the UpdatePanel (UpdateMode=”Conditional”). But before doing that, let’s check what’s going behind the scenes with the full postback.

To do that enable the Web Development Helper bar (it’s included in IE8 and you can download it for IE7).

image

Then enable logging and click on the Add item button.

image

Well, these are the calls to the server and the size of the downloaded elements (you can double click in each of them to see what’s what).

Now let’s put the control in the UpdatePanel, restart the page and enable logging one more time.

ShoppingCart.aspx

        
            
                
            
        

It seems that nothing happened because only the shopping cart control was updated. Check how the amount of data received has been reduces dramatically, 3 connections instead of 7 and the page connection reduced from 10Kb to 6Kb. If we open the received data we can see how the creation of the control was sent from the server along with the html representation as I had explained before.

If you have any problems with JS running inside Update Panels and Postbacks, this is the tool you can use to check what was sent and returned.

image

Well, I hope that you learnt few things about AJAX Server controls and the MS AJAX Framework. A good way to keep learning about it is downloading the source code for the AjaxControlToolkit and have a look at the samples and controls, believe me, there’s plenty there.

You can download the code here.
Important: I couldn’t upload the file as it was a zip file, so I added the extension jpg. After saving the file, remove the extension and unzip it normally.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s