Working with the Ajax Control Toolkit | WebReference

Working with the Ajax Control Toolkit

By Joydip Kanjilal


Ajax, an acronym for Asynchronous JavaScript and XML, is a combination of a number of technologies used for building rich and responsive user interfaces. Ajax has quickly become the technology of choice for building lightning fast and responsive user interfaces. The Ajax Control Toolkit is a community project from Microsoft that contains a number of controls to design and implement Ajax - enabled controls seamlessly. This article looks at ASP.NET Ajax Control Toolkit and how you can work with it.

What is ASP.NET Ajax Control Toolkit?

The Ajax Control Toolkit is a repository of controls that are used to create Ajax-enabled controls for building highly responsive and interactive Ajax-enabled Web applications. Microsoft states, "The ASP.NET AJAX Control Toolkit is an open-source project built on top of the Microsoft ASP.NET AJAX framework. It is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls, as well as a rich array of controls that can be used out of the box to create an interactive Web experience." Reference: http://www.asp.net/ajax/AjaxControlToolkit/Samples/

Note that the ASP.NET Ajax Control Toolkit was first released by Microsoft in early January 2006. Then, it was made freely available to the community a few months later. Moreover, the new Ajax Control Toolkit has built in support for ASP.NET MVC Framework as well. In addition, the new toolkit provides support for client-side data access, client-side templates and data binding in the client side. Not only that, you can also use the Ajax Control Toolkit with jQuery - the popular JavaScript library.

Where can I get Ajax Control Toolkit?

You can download the Ajax Control Toolkit from this link: http://www.codeplex.com/wikipage?ProjectName=AjaxControlToolkit

You can also download the source and the binaries of the original Ajax Control Toolkit from this link: http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33804

Getting Started with the Ajax Control Toolkit

After you download the Ajax Control Toolkit, extract it in a folder. Next, you need to add the toolkit to the Visual Studio Toolbox. You can create an Ajax Control Toolkit tab to the toolbox and name it as Ajax Control Toolkit. Once done, right-click on the tab you have just created and select "Choose Items" and browse to the path in your system where you have extracted the Ajax Control Toolkit. All of the controls inside the Ajax Control Toolkit will appear in the toolbox in your Visual Studio IDE. If you want to upgrade to a newer version of the toolkit, that's simple. Just delete the old binaries from the bin folder of your application. Also, delete the tab Ajax Control Toolkit and follow the same steps to add the toolkit controls again.

You will also need to include the Control Toolkit assembly in your ASP.NET Ajax-enabled application to get started working with Ajax Control Toolkit.

Working with the Ajax Control Toolkit

Note that Ajax-enabled controls are ASP.NET server controls that are created by wiring the client components in your application to the server controls. An extender is actually an Ajax-enabled control that you can use in your application to wire a client component to a server component and inject custom behavior. In addition, the extender simply acts as an external object that has the capability to attach itself to an existing server control. The Ajax Control Toolkit contains a set of extenders. These extenders can be used to build Ajax enabled controls. The extenders inside the Ajax Control Toolkit include the following:

  • ModelPopupExtender
  • AnimationExtender
  • ToolkitScriptManager
  • RoundedCornersExtender
  • ConfirmButtonExtender
  • ListSearchExtender
  • SliderExtender
  • NumericUpDownExtender
  • DragPanelExtender
  • CalenderExtender
  • MaskedEditExtender
  • AutoCompleteExtender
  • DropShadowExtender
  • PopupControlExtender
  • DynamicPopulateExtender
  • CollapsiblePanelExtender
  • FilteredTextBoxExtender
  • ValidatorCalloutExtender

One of the most important of all the extenders in the Ajax Control Toolkit is the AutoComplete extender. This extender can be easily wired to any TextBox control to provide auto complete behavior to the TextBox control.

Here is how you can register the Ajax Control Toolkit:

The markup code of the AutoCompleteExtender is shown in the code snippet below:

The properties of the AutoComplete extender include:

  • ID — This property is used to specify the name for the extender.
  • TargetControlID — This property is used to specify the name of the server control to which this extender would be bound.
  • ServicePath — This property is used to specify the path of the web service that would be used to fetch data.
  • ServiceMethod — This property is used to specify the name of the web method to be used to fetch data.

Out of the above list of AutoComplete extender properties, the most important are the TargetControlID and the ServiceMethod property. While the TargetControlID property is used to specify the target control to which this extender has to be bound to, the ServiceMethod property is used to indicate the name of the web method that would be used to fetch data.

Here is how the markup code looks like when you have an AutoCompleteExtender that is bound to a TextBox:

Another important extender is the ConfirmButton extender control. This is used to attach itself to a Button control and then prompt the user with a confirmation request before some action is performed. The following code snippet illustrates how this extender control can be used in your application to prompt the user before a record is deleted:

Summary

The AJAX Control Toolkit from Microsoft is a community project that consists of an SDK and code samples. According to Microsoft, "The ASP.NET AJAX Control Toolkit provides a set of sample controls and extenders that makes it a snap to spice up your web site with rich functionality". In this article, we examined the ASP.NET Ajax Control toolkit and discussed how to start working with it. Extenders are controls that are part of the Ajax Control Toolkit. We have also explored two sample extender controls in this article. You can learn more on the Ajax Control Toolkit from my book titled, "Sams Teach Yourself ASP.NET Ajax in 24 Hours". Here is the link to the book at Amazon: http://www.amazon.com/Sams-Teach-Yourself-ASP-NET-Hours/dp/0672329670/ref=sr_1_6?ie=UTF8&s=books&qid=1259572181&sr=1-6

Original: December 9, 2009