In this article, we will be looking at the AJAX Toolkit from Microsoft. This article is directed at users of Visual Studio.NET 2008, but users of the 2005 version may also take part, but will be required to install the AJAX Extensions from Microsoft.
The AJAX Control Toolkit is a group of AJAX Extenders that was released by Microsoft to make it easier for us to implement seemingly complex functions. Microsoft have made it very easy for us to implement into our web applications such dynamic features as rating systems, modal popup windows, and dynamic searching of a listbox. During this article, we will be looking at these implementations of AJAX a little more closely, but to do so, you will need to download the AJAX Control Toolkit from this link.
If you need any help with installing the Toolkit for VS.NET 2005, please view this article.
When implementing AJAX in an ASP.NET Web Application, the first thing we need to do is add a ScriptManager to the page. The ScriptManager will manage all of our AJAX calls for us, and will look something like this:
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
We should have our AJAX Toolkit in our toolbox in VS.NET, and should be able to just drag and drop any of the extenders into our ASPX page. The first we will be taking a look at will be the TextBoxWatermarkExtender. This will extend any TextBox on your page to include a Watermark of sorts that will be displayed when the textbox is empty. When the user clicks on the textbox, the watermark will disappear - only to re-appear if the textbox is still empty when it loses focus.
To use this extender, let's first add a textbox to our ASPX page:
Next, we can drag onto our ASPX page the Extender. When we do this, you should notice two things. Number one should be the assembly reference for the Custom Control, which is added at the top of the page, and two, the Extender itself is added where you dragged it onto.
The assembly reference will look something like this, just below the page directive:
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!
And the Extender itself should look something like this:
Notice that the only attributes that are required for this extender are to specify the TextBox control that it will be assigned to, and specify the text to be displayed as a Watermark. An optional third attribute is to use a CSS Class for the Watermark. In this example, we use the following CSS style:
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
Now if you run this page you will see the Watermark displayed in the textbox on page load. The watermark will disappear when you click the textbox and enter some text. However, if you delete that text and then click off of the textbox (losing its focus), the Watermark will re-appear. Notice that all of this happens without a delay - in true AJAX style.
The next Extender we can demonstrate is the ModalPopupExtender. With this control, we can set a Control to popup, and have the rest of the page disabled. This is useful when generating confirmation messages, or warnings, etc.
For this example, we will create a Panel to popup on a button click. Let's go ahead and add a Button and a Panel to our ASPX page:
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
Notice we specify a CSS Class for the panel, to make it stand out more. We also create a class for the background, which will cover the whole page when the popup is visible. We will assign this class to the ModalPopupExtender shortly. The CSS Classes look like this:
border: solid 1px #000;
Now we can drag onto our ASPX page the ModalPopupExtender, which will look something like this: