To get started, we need to first download the AJAX Control Toolkit from Microsoft, using the link above. If you do not already have the Toolkit installed on your machine, get the ZIP file with the source code.
Once downloaded, extract to a folder on your computer and start Visual Studio. We will add the toolkit to the toolbox within VS. Open up the toolbox and right-click in an empty space, then choose Add Tab. Give it a name like AJAX Toolkit, or AJAX Extenders. Then when it is added, right-click under the tab and select Choose Items. Wait for the Window to appear, and then click the Browse button under .NET Framework Components. Navigate to the folder you extracted to and select the AjaxControlToolkit.dll in the SampleWebSite/Bin/ directory. VS will then add all the AJAX Toolkit controls to the toolbox.

Now we are able to add any of these controls to our web applications. We must still remember the ScriptManager, as all of these controls are AJAX-enabled. So to start, let’s add the ScriptManager control:

In this example, we will be using a Repeater control to display menu items from a SQL Database. Let’s go ahead and add the Repeater, then we will go about creating the table and data access class.

Now we have our Repeater control, let’s add our database. Right-click the App_Data folder in Solution Explorer and choose Add New Item.. SQL Server Database. When it appears in Server Explorer, right-click the Tables folder and choose Add New Table. In table designer, let’s create three columns – ID, MenuText and MenuInfo, with data types of bigint, varchar(25) and varchar(50) respectively.
Once our columns are created, we can save the table and give it a name. Then, right-click the table name in Server Explorer and choose Show Table Data. Let’s add some data to the table to pull from, which we’ll use to build our menu. The MenuText will be used for the link, and the MenuInfo will be used for the pop-up description of the link.

Now that we have some data, all we need is to retrieve and display it. Right-click the Stored Procedures folder in Server Explorer and choose to add a new one. Let’s create a Stored Procedure to get the data from our table:

Once we save this Stored Procedure, the CREATE keyword will change to ALTER and this will allow us to edit it if need be.

Let’s go ahead and drag a SqlDataSource control onto our ASPX page, then click into design view and click the Smart Tag of the SqlDataSource, then Configure Data Source. Choose the database name from the drop-down and follow the instructions to select all data from the table we created. Finally, click finish and then delete the SqlDataSource control. This was a quick way to build our Connection String in the Web.config file:

We will be using this connection string to connect to and retrieve data from our database.
Next up, right-click your project folder in Solution Explorer, and if you don’t already have an App_Code folder, choose Add ASP.NET Folder > App_Code. Now right-click the App_Code folder and choose to Add New Item.. Class. Give it a descriptive name, I chose Methods, then add the following using statements:

We have added these references because we will be using them to get our Connection String from the Web.config and also to connect to our database.
We will be creating a method to use the Stored Procedure we created earlier, that will retrieve the data from the database. This is how we do it:

Notice that when using Stored Procedures, we reference the Stored Procedure name, and then set the CommandType.

This method will return a DataTable of all the Menu Items in the database. Now we can call this in the back-end and set to the Repeater’s DataSource:

Next up, to make use of this data and add the HoverMenu functionality, we drag from the AJAX Toolkit onto the ASPX form the HoverMenuExtender. This will add references in your bin folder, and also to the top of your ASPX page:

And our code should look something like this:

Within our ItemTemplate of the Repeater, we add two Panels – one for the menu item, and the other for the menu item description. We specify each control ID in the HoverMenu Extender, which takes care of the rest of the functionality for us.

Download Source Files