I wont spend long here explaining what AJAX is, what it does or even whether it should be written AJAX or Ajax. I am going to show a simple demonstration of how to use the ASP.NET AJAX framework in your ASP.NET web pages.

What we want to achieve here is some sort of interaction between the web page and the server without having to post-back the entire web page.

First of all you'll need to download and install ASP.NET AJAX

Once this has been installed open up Visual Studio or Visual Web Developer, select File > New > Web Site and, under 'Visual Studio Installed Templates', select 'ASP.NET AJAX-Enabled Web Site.

Select a location to save your web site project and click OK. An opening default page will have been created - switch to design view. You should see something like this:

A ScriptManager should have automatically been added to your page. The ScriptManager will register scripts for the Microsoft AJAX Library on your page meaning you don't have to worry about writing a single line of JavaScript (which is great).

Now - look in your toolbox, somewhere near the bottom of the toolbox list you'll see an AJAX Extensions tab:

Drag an UpdatePanel onto your page so you have something like this:

The UpdatePanel can be seen as a wrapper that enables any control within it to post back to the server without requiring the whole page to reload.

Drag and drop a label and a button from your toolbox into the UpdatePanel:

Double click the button to create a button.click event. We're going get our label to display the time. More specifically, we're going to get it to display the current second of the computers clock. So, your entire button clicked event for your button should look something like this:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

Label1.Text = Date.Now.Second

End Sub

Save your file and select File > View in Browser. You should see a page with a button and some text that initially says 'Label'. Now click the button and you should see something like this:

The important thing here is the fact that the number displayed will change each time you click the button without refreshing the entire page. This is a very basic AJAX application.

What's great about this is that you can now extend your page to include anything you like within the UpdatePanel. Try dragging a calendar control into the UpdatePanel. When you view your page you'll see that the calendar is able to function without requiring an entire page reload. Here it is in action:

This control exposes so much functionality to my page without the need to reload the entire page and also means I don't have to write any JavaScript and can concentrate on writing my VB.Net or C# code to build intuitive, responsive web pages.

A quick note on deploying your AJAX application

When you installed the framework, the assemblies necessary to run the application will have been registered on your machine. If you upload your site, make sure you upload the web.config file and any required assemblies - these can be found in the AJAX Extensions folder (for example, C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025). You will need to upload the .dll files within this directory and they will need to be placed within the Bin folder in the root of your website.

discuss this topic to forum