ASP.NET AJAX Control Extenders - rolling your own
The release of Microsoft ASP.NET AJAX Extensions is due very soon, and it contains a wealth of functionality. The AJAX Control toolkit is an open source, free library of controls and additional framework that sits on top of the Microsoft ASP.NET AJAX Extensions. If you want to create your own controls using the ASP.NET AJAX extensions, you can either create it using the base classes of the ASP.NET AJAX Extensions itself, or you can use the additional features that the AJAX Control toolkit provides.
This post is going to deal only with creating controls using the base ASP.NET Extensions framework.
There are essentially two types of controls you can build, ScriptControls and ExtenderControls. A Script control is a control that provides all its own functionality and relies on no other controls to achieve its purpose. In contrast, an Extender control targets another control and extends its functionality. The UpdatePanel and Timer is a good example of a script control, whereas the AutoCompleteExtender (contained in the Futures CTP) or the TextBoxWatermark control (contained in the AJAX Control toolkit) are good examples of extender controls. Both the extender controls target a textbox type control and extend or augment its functionality.
So lets look at creating our own extender control. To do this, you need only inherit from the Microsoft.Web.UI.ExtenderControl base class like so:
public class MyExtender : ExtenderControl
and we only need to really implement two abstract methods:
protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(System.Web.UI.Control targetControl)
and
protected override IEnumerable<ScriptReference> GetScriptReferences()
GetScriptReferences tells the framework what script resources this control needs to operate. We can specify this like so:
ScriptReference sr = new ScriptReference();
sr.Name = "MyExtender.MyExtenderScript.js";
sr.Assembly = "MyAssembly";
yield return sr;
You can define all your script references here. If you need more than one, its easier to just create a generic List< ScriptReference> collections, add as many ScriptReference objects to it as required, and return that.
GetScriptDescriptors defines what properties and functionality your control is providing. This allows the framework to associate client side properties with server side properties, as well as create the client side behaviours, based off the properties provided on the server side or in markup.
You can define your script behaviours like so:
ScriptBehaviorDescriptor behavior = new ScriptBehaviorDescriptor("MyExtender.MyExtenderBehavior", targetControl.ID);
behavior.AddProperty("MyBehaviorProperty", _someProperty);
yield return behavior;
In this instance, MyBehaviorProperty is a property defined within the client script behaviour object. Your (extremely simple) client side behaviour would look similar to the following:
Type.registerNamespace('MyExtender');
MyExtender.MyExtenderBehavior = function(element) {
MyExtender.MyExtenderBehavior.initializeBase(this, [element]);
var _myBehaviorProperty = null;
}
MyExtender.MyExtenderBehavior.prototype = {
initialize : function() {
ToolkitSingleClickExtender.ToolkitSingleClickExtenderBehavior.callBaseMethod(this, 'initialize');
},
dispose : function() {
ToolkitSingleClickExtender.ToolkitSingleClickExtenderBehavior.callBaseMethod(this, 'dispose');
},
get_MyBehaviorProperty : function() {
return this._myBehaviorProperty;
},
set_MyBehaviorProperty : function(value) {
this._myBehaviorProperty = value;
},
}
MyExtender.MyExtenderBehavior.registerClass('MyExtender.MyExtenderBehavior', Sys.UI.Behavior);
One final note, the class itself is also typically decorated with a TargetControl attribute to tell the framework what type of control our extender is targeting. For example:
[TargetControlType(typeof(Button))]
public class MyExtender : ExtenderControl
{
private string _someProperty = string.Empty ;
//......
So thats essentially the process for creating your own extender controls using the ASP.NET AJAX Extensions. Its a nice way of hooking server side controls and markup to client script and behaviour, with properties, events and all the goodies. I haven’t touched on the fact of embedding your script resources into assemblies and how to go about using them from there, instead of as straight script files included in your project. I also haven’t touched ondefining events and enhanced functionality within your extender client side implementation. This is all a post for another day.
Alternatively, you can wait for the release of my upcoming Beginning ASP.NET AJAX 2.0 book that is due out early 2007 in which I am one of many authors (other authors are Wally McClure, Scott Cate, Steve Orr and Steve Smith). This topic has an entire chapter devoted to the creation of a fully working extender control using both the core framework as well as the AJAX Control toolkit.