Using the AJAX Control Toolkit in ASP.NET 3.5 and C#

Category: AJAX

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:

Name:

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:

Name:
WatermarkCssClass="Watermark" WatermarkText="Please enter your name.." />

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:

.Watermark
{
color:Gray;
font-style:italic;
}

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:



Thanks for confirming..

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:

.GrayedOut
{
background-color:Gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.ModalPopup
{
background-color:#FFF;
padding:15px;
border: solid 1px #000;
}

Now we can drag onto our ASPX page the ModalPopupExtender, which will look something like this:

OkControlID="btn_Ok" TargetControlID="btn_Confirm" PopupControlID="panel_ModalPopup" />

Notice on this Extender we have three controls to reference: which will initiate the popup, which will be the popup, and which will act as the popup Ok control. We set the Panel to be the popup and the Button to initiate it. We also have an OK button in our panel, so this will close the panel. There is also the option of specifying a Cancel button for the popup. Finally, we add the CSS Class to the popup and we can then run it.
Notice that when we click the Confirm button, we are presented with a very nice popup and the rest of the page is disabled and grayed out:

When the OK button is clicked, we are returned to the normal page. Again, the functions are instantaneous and are more akin to a desktop application than a web application.

The next Extender we will be looking at is the ListSearchExtender. This can be a really useful tool, particularly when working with large, unordered data in a ListBox control. In order to successfully implement this extender, we are going to add a ListBox Control and fill it with sample data:

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

Now we add our Extender from the toolbox:

This extender has a lot of power, and yet, we are only required to associate the ListBox with it and boom - instant search capabilities. Now when you run this web application, you'll be able to click on any item in the ListBox and start typing. As you type, the closest match will be selected automatically:

The final Extender we will be looking at in this article is Rating. This little control will allow your users to quickly and easily select a score from a graphical interface, which you can fully customize. This control requires four different CSS Classes by specified: FilledStarCssClass, EmptyStarCssClass, WaitingStarCssClass, and StarCssClass. We create separate classes for these and add them to the ASPX page:

.RatingStarOff
{
background-image: url(media/star_off.png);
width:15px;
height:15px;
}
.RatingStarOn
{
background-image: url(media/star_on.png);
width:15px;
height:15px;
}
.RatingStarEmpty
{
background-image: url(media/star_off.png);
width:15px;
height:15px;
}
.RatingStarWait
{
background-image: url(media/star_wait.png);
width:15px;
height:15px;
}

We created simple star graphics for this example and used them in the CSS classes. Next, we will also add an UpdatePanel and a Literal control to the ASPX page, in addition to the Rating control:


FilledStarCssClass="RatingStarOn" EmptyStarCssClass="RatingStarEmpty" WaitingStarCssClass="RatingStarWait" MaxRating="10" />

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!

We will use the Literal control to display the selected rating, and the UpdatePanel to force an Asynchronous Postback. To do this, we also set the AutoPostBack attribute of the Rating control to true. And finally, in the code-behind, we set the value of the Literal control, using the Changed event of the Rating:

protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
lit_Rating.Text = "You rated " + Rating1.CurrentRating.ToString() + "/" + Rating1.MaxRating.ToString() + ". Thank you.";
}

We use the MaxRating attribute of the Rating control instead of hard-coding 5 (or 10) because the Rating can be easily changed by setting the MaxRating attribute in the ASPX page.

That's all for this article, but the AJAX Toolkit has plenty of extenders to utilize. Don't be afraid to just dive in and check them out.



Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!