What is Ajax extender control?
Ajax extender control is a control whose purpose is to add a
behavior to the existing ASP.NET controls. These behaviors usually are client
side behaviors that will extend the functionality of an existing ASP.NET
control. I mention the sentence "an existing ASP.NET
control" twice, to ensure the concept of Ajax Extender controls.
The difference between Ajax extender control and custom server controls is that
the custom server controls allow you to create a new server control that will
work separately without extending any other controls.
One of the interesting features that Ajax extenders offer is
calling web services; we can hit the server and get some data from it without making
the end-user notice. For example, the AutoComplete Extender Control uses the
web service for filtering the typed text from Database without any flickers.
You can find a lot of resources and articles that talk about
Ajax extenders, especially here in aspalliance.com.
ASP.NET Ajax controls project
To create a new Ajax extender, open your Visual Studio, and
then create a new ASP.NET AJAX Control Project, as illustrated in Figure1.
Figure1
By default, this will create three files:
·
<your extender name>Behavior.js
file: an embedded JavaScript file, where we will locate our client-side logic.
·
<your extender name>Designer.vb
file: a class that enables design-time functionality. You should not need to
modify it.
·
<your extender name>Extender.vb file: a server-side control
class that will manage the creation of your extender, and allow you to set the
properties at design-time. It also defines the properties that can be set on
your extender. These properties are accessible via code and at design time and
match properties defined in the Behavior.js file.
Ajax Library Shortcuts
There are several shortcuts methods for writing client-side
functionality, such as:
·
$addhandler: enables you to assign a handler function to an event
·
$clearhandlers: clears all the handlers that you have created
·
$removehandler: removes a specific event handler
·
$get: a shortcut for document.getElementById
·
$find: allows you to access the class object, and use the methods
and properties
Ajax Extender Logic
Ajax extender logic is quite simple; the following steps
explain this process with code samples.
Create a property in the Extender.vb class, similar to what
I did in Listing 1.
Listing 1
<ExtenderControlProperty()> _
<DefaultValue("")> _
Public Property MyProperty() As String
Get
Return GetPropertyValue("MyProperty", "")
End Get
Set(ByVal value As String)
SetPropertyValue("MyProperty", value)
End Set
End PropertyDeclare a property variable at initializeBase
function in the Behavior JavaScript file, as illustrated in Listing 2.
Listing 2
this._myProperty = null; //Property Variable
Write get/set property for the above variable, as in Listing
3, and remember it is case sensitive.
Listing 3
get_MyProperty: function()
{
return this._myProperty;
}
,
set_MyProperty: function(value)
{
this._myProperty = value;
}
,Create a JavaScript function, which will be the container of
your client-side logic.
Listing 4
_myFunction : function(e)
{
alert(this._myProperty);
}Finally, add an event handler using the Ajax Library
Shortcut $addhandler inside the initialize
function, as you can see in Listing 5. We added an event handler for the
mouse over event, but note that we have removed the "on" prefix word
and that is the role.
We have created a delegate function that will be mapped to
the _myFunction function, which will be fired when
the mouse is going to be over the extended control.
Listing 5
$addHandler(this.get_element(), 'mouseover',
Function.createDelegate(this,this._myFunction));
Build the project, and that is it; you have created a simple
Ajax Extender control.
