To provide an autocomplete feature to a textbox we can use an extender control called AutoCompleteExtender available in the toolkit. Additionally, we can also develop our own extender control by inheriting an abstract class called ExtenderControl System.Web.UI namespace.

This article will give an introduction on extender controls and on how to use these extender controls that comes with Ajax Control toolkit in our projects.

Downloads

Visit the following link to download the latest Ajax Control Toolkit.

http://www.asp.net/AJAX/ajaxcontroltoolkit/

You can download this package with or without source code. Download it and unzip the package.

For ASP.Net AJAX 1.0 and Visual Studio 2005, you can download the toolkit directly from here.

Package Details

The package contains 2 folders,

1.      Sample Website that has tutorial with examples.

2.      AjaxControlExtender.vsi, this file installs a new Visual Studio template for creating new extender controls website. Refer the below figure,

Using the AJAX Control Toolkit

1.      Open Visual Studio 2005. Create a new website by clicking file>New>ASP.Net AJAX-Enabled Web Site.

2.      Right click in toolbar and select “Add Tab” and name it as “Ajax ToolKit”. Refer the below figure.

1.      Inside the tab, right click and select “Choose Item…” as seen in the above figure.

2.      Click “Browse...” button and reach to the “SampleWebSite” folder where you have unzipped your package. Navigate to BIN folder, select AjaxControlToolkit.dll. Click OK to close the “Choose Item…” dialog box.

3.      Now, you can see the extender controls in the toolbox.

Note

As I told earlier, along with the extender controls the Ajax Control toolkit has some rich server controls called Accordion, Rating, ReorderList, TabContainer, etc. We will see more about these controls in coming days.

Moving forward, we will use CalenderExtender control as an example to have a basic knowledge on how to use Ajax control toolkit.

Steps

1.      Drag a textbox control.

2.      Drag a CalenderExtender control.

3.      Set the textbox ID in the TargetControlID property of CalenderExtender control.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1">

</cc1:CalendarExtender>

Execute the page. On clicking inside the textbox the calendar control will displayed where we can select the date.