Posted On
Wednesday, July 04, 2007 1:30 PM
Posted In
Development
The power of AJAX is brilliantly demonstrated through the AJAX Control Toolkit. Once I got started with converting two of my key sites to AJAX, I also utilized the Control Toolkit to bring some flair to the design of the site, and also found it compliments the business processes brilliantly, reducing the amount of pages required to develop simple screens like adding or removing users. In this post I want to highlight some of the toolkit extensions I am using and my thoughts on it all.
The control toolkit itself offers both new controls for ASP.Net and also extensions to the existing controls. New controls in the toolkit includes the Accordion Control, ModalPopup Control, and the Tab Control. It also offers extensions to the standard textbox and other controls, including the TextBoxWatermark, MaskedEdit, ConfirmButton and ValidatorCallOut. These controls and extensions are all AJAX enabled and makes huge strides towards closing the gap between Windows and Web Development. I have barely touched the service in using the Toolkit and new controls and extensions is already in development. The Toolkit is free like AJAX and hosted on CodePlex.
Calendar Control
The toolkit calendar control is an extension to the textbox, allowing various ways of popping up a client side calendar for date selection. If like me you've spent hours looking for a free ASP.Net date control then you will love using implementing this control into your site. With no complicated registration code needed, you simply include the extension in your page and set a few required properties. Navigation of the control itself is simple and by pre populating the referenced textbox with a date will ensure the control defaults to the same date. I am impressed with the amount of thought that went into designing this control and now use it consistently whenever I need dates entered in a web page. More on this control and some samples are available here.
ConfirmButton Extension
The ConfirmButton can be linked to any IButton control, and is simply a JavaScript confirmation popup. Something that again in the past had to be implemented using JavaScript, now built into any page that reference the Control Toolkit. Not much more needs to be said about this control, a must have on any page that captures information, processes edits or even deletes information. More about this control can be found here.
MaskedEdit Extension
The masked edit extension specifies formats for data input on textboxes. It also provides a brilliant time entry method for any website, allowing for switching between AM and PM when entering time. It allows the format of data to be enforced even before the use starts entering data, ensuring data is captured correctly. Even brilliant for phone numbers and email address. No more regular expression validations all over the place. It can also be used along with the Calendar Control to ensure that the correct date format is captured before submitting a form. More on this control can be found here.
ModalPopup Control
The modal popup control allows for dynamic pop-up's in web pages. I have to admit that this has become one of my favourite controls, especially on Management pages where adding and editing of data needs to occur. Community Server has been utilizing this feature in it's list management section under administration, and if correctly configured the pop-up's can be managed from code. Each popup basically exists as a hidden panel on the page, which is displayed on request. Add another AJAX UpdatePanel inside this Popup and you can do PostBacks inside the popped up window, and effectively any add or edit form, within reason, can utilize this control. I found creating list management screens a breeze, avoiding having to create 2 or 3 pages to just allow editing of category or item lists that only have 2 or 3 columns of data. You can see this control in action here.
Warning: I do not recommend using this control for big form, as it can become a bit tricky to manage when a form has more then 10 fields.
Tab Control
Last but not the least is the Tab Control. Fairly self explanatory the ability to have client side tabs can make any management dashboard a joy, being able to select a tab and focus on specific details or sections of a screen. With the latest release of the toolkit design mode support was added to the control and it is also one of the controls a utilize frequently inside pages. Have a look here at how the control can be used.
Conclusion
In this post I have only listed the controls I have used in the projects I have worked on. The ability to mix and match these controls, for example having ModalPopup's inside the Tab Control, makes it extremely easy to great a rich and interactive user interface for any type of site, highly recommend in management or dashboard type application. I am hoping to start exploring the rest of the Toolkit soon, and will admit I've had a hard time trying to implement some of the other controls, however once the learning curve is complete, the power of this Toolkit should not be ignored. I provides developers the power previously only found in high end 3rd Party Components, for free.
