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:

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

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.

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:

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:

Download Source Files