Using ASP.NET AJAX Extenders Part I

AJAX Extenders are great when used in ASP.NET web pages. ASP.NET AJAX Extenders are part of the ASP.NET AJAX Control Toolkit. You can download the ASP.NET AJAX Control Toolkit from here.

What is ASP.NET AJAX Control Toolkit?
The ASP.NET AJAX Control Toolkit is a shared source project built on top of the Microsoft ASP.NET AJAX framework. Microsoft and the ASP.NET AJAX community has made it possible to develop sophisticated AJAX web applications using the AJAX Control Toolkit.

How does ASP.NET AJAX Extenders fit into the ASP.NET AJAX picture?
ASP.NET AJAX extenders are controls that enhance Web UI server controls using AJAX to create an interactive web experience.

Here are two AJAX extender examples to elaborate the point of interactive web experience.

The first example is using the CalendarExtender and the second example is using the PopUpExtender.

CalendarExtender Example

In the CalendarExtender example, the idea is to achieve the above. When a user clicks on the calendar image, the calendar will pop-up. When a date in the calendar is selected, the textbox will be populated with the selected date. You see this type of control a lot on air line reservation websites.

To achieve this, we need to add a TextBox control, a Image control and a CalendarExtender control. To validate the controls, we have also added a RequiredValidator and a CompareValidator as a date checker. In the design view in Visual Studio, the controls will look like this:

Adding the CalendarExtender control.

If you have installed the ASP.NET AJAX Control Toolkit, in the Toolbox in Visual Studio, you will see a list of AJAX controls available. The CalendarExtender control is one of the controls in the list below.

Let’s examine the CalendarExtender code

In the CalendarExtender properties from the source code, you will see the following:

ID=”CalendarExtender1″
runat=”Server”
TargetControlID=”TextBox1″
Format=”dd/MM/yyyy”
PopupButtonID=”Image1″

TargetControlID tells the CalendarExtender control that TextBox1 is the target for the value selected from the CalendarExtender control. In this example I have defined the date format as “dd/MM/yyyy” since I am coding in UK date format.

PopupButtonID tells the CalendarExtender control that when Image1 is clicked, the CalendarExtender control should appear/disappear depending on its present state.

You will notice from the source code there is a TextBox control, an Image control and validation controls added. In order for the CalendarExtender control to work, it requires a TextBox control and an Image control and the validation controls were added simply to make the code more robust.

Let’s examine the code-behind

Do you need to add code-behind code in order for the CalendarExtender control to work? The answer is no but I am showing you that you can tell the CalendarExtender control to display today’s date whenever the web page is loaded. So this is an extra. It requires just a single line of code TextBox1.Text = System.DateTime.Now.ToShortDateString(); in Page_Load

Now compile the code and run the example in Visual Studio. This concludes Part I of Using ASP.NET AJAX Extenders. In Part II of Using ASP.NET AJAX, we will examine the PopUpExtender Example.

AJAX related post: Beginning AJAX with Visual Studio 2005