Sunday, June 28, 2009

AJAX Control Toolkit

With .NET 3.5, you can easily work on AJAX without installing any add-on. AJAX can be used in any web application without any hassel to speak of. And with AJAX more interactivity can be put in an application.

AJAX control toolkit makes life more easier. It provides many interactive controls, that can be put in your application easily. It is an open-source project.

How to start using AJAX Control Toolkit:

1. Download the toolkit here
2. Here's a video that explains how to set up the toolkit.


ASP.Net's official website gives an over view of all the controls provided in the toolkit here.


With the toolkit you can easily put animation in your app. There are a lot of things which can prove to be very helpful. You should definitely go through the above link, it shows how all the controls work, plus code is given to help you get you on your way to using these control effectively.

For every page that's going to use AJAX, or the toolkit (in other words, AJAX) ScriptManager has to be added.
All you have to do is put

<asp:ScriptManager ID = "Scr_Mgr" runat = "server" />


Plus to use the toolkit you have to register it first. If you just drag and drop any control then the below line of code would be added automatically, other wise you can put the line yourself;

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

Masked Edit Extender:
In the application I am working on these days; I have to provide a mask for the text box, so that each user who enters data can simply punch in the characters and the data will be formatted automatically. Of course, you can use a javascript for this, it's not like people didn't do this before AJAX came into the scene. But with the toolkit, as I mentioned, it becomes much more easier.

For the above scenario, Masked Edit Extender can be used. Masked Edit Extender, extends a textbox, you have to provide a Mask. Mask basically tells the format of the data.

Let's say you are looking for a format like this: "0312-3456789".
The syntax would go something like this;


<asp:ScriptManager ID = "Scr_Mgr" runat = "server" />
<asp:TextBox ID = "txtbx" runat = "server" />

<cc1:MaskedEditExtender ID="txtbx_MaskedEditExtender" runat="server"
TargetControlID="txtbx"
Mask = "9999-9999999"
MessageValidatorTip="true"
MaskType= "None"
InputDirection="LeftToRight"
AcceptNegative="Left"
DisplayMoney="None"
ErrorTooltipEnabled = "true"
ClearMaskOnLostFocus = "false" >
</cc1:MaskedEditExtender>


1. It doesn't let you type more than the number of characters in the mask.
2. It lets you type letters if the mask allows you to. So say you put mask as
"AAAA-99999", for the first four characters only letters will be allowed, and no numbers,
and for the rest of the input, only numbers will be allowed, no letters.

The problem I faced was that, the mask appeared only when the user clicked on the text box, and when
the user was done typing and as the focus shifted to some other control, the input data again became
unformatted. That too can be handled simply by setting a property.

ClearMaskOnLostFocus = "false"

That's all for the moment. Other controls I found helpful are: Filetered Text Box and Validator Callout.
Might write something on them soon. :)

4 comments:

Rambler said...

Didn't you have anything better to do on a Sunday :P

Intricate said...

@Rambler..
You are right there.. had nothing better to do :P Let's see what I come up with the next time I find some time to spare :P

Haris Gulzar said...

Im amazed to see you find time to blog while being a software engineer :-P. And above all, you blog about CS related technical things :-P.

Intricate said...

@Haris Gulzar..
And you can see how much time I get for blogging.. it has been more than a month since I last posted or replied to the comments I got on my posts. :|