In this tutorial, you will learn how to implement Microsoft's AJAX Extensions, and use a few of the Controls that make it easier for us to utilize the power of AJAX with ASP.NET. In this example, no code is required. We will simply be exploring the Password Drop Shadow and Password Strength Extenders, and the Accordion AJAX Control. The AJAX Extenders not surprisingly extend the functionality of existing .NET Controls. The Password Strength indicator allows your page to dynamically give feedback about a user's password as they are typing, indicating its strength.

This tutorial was created with and aimed toward users of 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.
Also, if using 2005, some additional steps may be required that are not listed in this article.

The AJAX Toolkit is a group of AJAX Controls and Extenders Microsoft have developed to make it easier to implement AJAX-enabled features. The Toolkit can be downloaded directly from Microsoft at www.codeplex.com/AjaxControlToolkit. This Toolkit is constantly being updated and consists mainly of AJAX Extenders for existing ASP.NET Controls.

To begin, we need to first download the AJAX Control Toolkit from Microsoft, using the link above.
Once downloaded, extract to a folder on your computer and start Visual Studio. Once opened, let us go ahead and add the toolkit to the toolbox within VS. Open up the toolbox panel 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 the downloaded files to and select the AjaxControlToolkit.dll in the SampleWebSite/Bin/ directory. VS will then add all the AJAX Toolkit controls to the toolbox, giving us easy access to drag and drop.

Because all of these controls (or extenders) are AJAX-Enabled, we will need to remember to add the ScriptManager, as this will handle all of our AJAX Calls behind the scenes. So either drag onto the ASPX page a ScriptManager from the toolbox, or type the following:

The next step is to add a textbox. This will be used for our Password input:

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

Let us now move to the Design view of the ASPX page. Click on the Smart Tag for the TextBox and you should see that we have a new option available to us, the Add Extender. This was added when we installed the Toolkit. It will allow us to add a number of different extenders for the TextBox control. Let's go ahead and choose th PasswordStrength Extender. Click Ok, and do the same to add the DropShadow Extender.
We should then have something like this:

As mentioned earlier, Visual Studio is doing most of the work for us behind the scenes. Because these are very similar to 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 attributes 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.
You should also notice the reference that is added to the top of the page:

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

If we ran the web application right now, we would be presented with a textbox with a drop shadow. We will only see the PasswordStrength Extender appear when we begin typing in the textbox, indicating the strength of the password we entered.
Finally, let's look at a very nice AJAX Control, the Accordion. Unlike the Extenders, the Accordion is its own control. It is independent and does not require another ASP.NET control. The Accordion is a group of panels, of which the headers can be clicked to reveal/hide the contents. Not only is this a great space-saver on a web page, but also also is a nice-looking effect with some smooth animation. Drag the Accordion from the toolkit or type the following directly onto the ASPX page, and also a few Accordion Panels:

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

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