Installing AJAX Toolkit for Visual Studio .NET 2008

This tutorial was created with Visual Studio.NET 2008. 2005 can be used, but Microsoft's ASP.NET AJAX Extensions, which can be downloaded at this location, must be installed.

Microsoft have a Control Toolkit that is not included with the .NET Framework, but can be downloaded from www.codeplex.com/AjaxControlToolkit. This Toolkit is constantly being updated and consists mainly of AJAX Extenders for ASP.NET Controls.
In this tutorial, we will be looking at one of these extenders to create a Password Strength indicator, which extends an ASP.NET TextBox, and also the AJAX Accordion.

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

To get started, we need to first download the AJAX Control Toolkit from Microsoft, using the link above. We should 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 toolkit 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:

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

Next, we will add a textbox control to the page:

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Now if we go into the design view of our ASPX page, we will see that clicking on the Smart Tag of the textbox control gives us a new option - Add Extender. Clicking on this will provide us with a number of different extender controls within the AJAX Toolkit that we can apply to this textbox. Choose PasswordStrength Extender, hit Ok, and repeat to also add the DropShadow Extender.

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

As usual, VS does a lot of the work for us, especially behind the scenes. Because these are essentially custom controls, they are already fully functional. All we need to do is add them to our project and reference which control will be being extended. Of course, there are further attribtues to customize, for example, we can modify the DropShadow's Opacity and Radius, etc. And we can also create our own CSS classes to completely change the look of the controls.

If we ran the web application right now, we would be presented with a textbox with a drop shadow. Only when we begin typing in the textbox, we see the PasswordStrength Extender appear, notifying us of the strength of our password, based upon number of characters.
Finally, let's look at a popular control of the AJAX Toolkit, which is not an Extender, the Accordion. This is a group of panels, of which the headers can be clicked to reveal and hide the contents. This is a great space-saver on a web page and also a nice-looking effect. Drag the Accordion from the toolkit onto the ASPX page, and a few Accordion Panels:

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

By default, this control will have one pane open at all times, meaning you cannot close all of them. This can be changed by setting the RequireOpenPane attribute to false, as in our example. This allows all panes to be closed to save even more room.
The entire ASPX page will look something like this: