Creating AJAX Pages with ASP.NET 2.0

Web applications have become more powerful over the years. In fact, many enterprise-level applications are now completely Web-based ones and continue to do so. 

However, all these applications suffer from the same drawback-that of the Web protocol. Any interaction that requires data to be processed by the server needs the page to be submitted back to the server and processed there before it can be displayed to the user.

AJAX is a new methodology of creating Web pages that allows developers to do away with this drawback. AJAX stands for Asynchronous JavaScript And XML. What this allows the developer to do is make an asynchronous call to a server using JavaScript on the client side of the Web page and receive results back in XML format that can be rendered on the browser-all without submitting the page itself. 

This provides an instant feedback mechanism, which was not possible before on Web pages. Internally, AJAX only reuses the current set of technologies namely XML, JavaScript, and XMLHTTPRequest API. 

The XMLHTTPRequest API was an invention of Microsoft to provide precisely the function described above. It has been available since IE 4.0 but was never too easy to use. However, it has now become a W3C standard and other browsers such as Mozilla, Safari and Opera have incorporated this as well.

Many sites currently use the features of this API to provide extremely cool looking Web interfaces. The most well known among these are the GMail interface, Google Suggest and MSN Virtual Earth.

An Atlas enabled Web page in which we are doing a simple search

So how do you build such interactive interfaces into your applications? Remember that unlike Flash, which requires a plug-in, XMLHTTP is already a part of your browser. However, until now, it has been complex to develop applications for it.



ASP.NET 2.0 already has the XMLHTTPRequest API in managed form available and is called 'Client Callbacks'. This makes creating AJAX type applications much easier than before. However, a new community project codenamed 'Atlas', takes this to the next level. 

Atlas allows developers to create AJAX-based Web pages a complete breeze and you can have full-fledged applications with asynchronous calls in no time at all. To work with Atlas you need VS.NET 2005 Beta 2 installed. Download the project template file from the Atlas site and install it. This creates a new Web project type named Atlas Web site. Select this to create your first Atlas enabled site.

Once the site is open in VS, you will see a new folder called ScriptLibrary, which contains many.JS (JavaScript) files. These are the core of the AJAX framework and help you get up and running very quickly by providing helper functions. 



On all the pages you wish to have AJAX implemented, you need to include a set of these scripts. The easiest way to do this will be to create a master page with the following in the header so that it looks like this.

The search results returned from the server. The Back button is disabled as there is no page to go back to

As you can see, Atlas allows compatibility with most known browsers-all you need to do is specify which ones you want to support. Once this is done, all pages you create with this file as the master are Atlas enabled.

But before we create an Atlas page, let us first create a service that returns XML from the server to the page. For this, we will create a simple Web Service in ASP.NET that accepts a search word. For now, it will return only the word back with additional text and the current server date and time. To create this page, add a new Web service page in the current solution and name it

SearchService.asmx.

Delete the default Web method that it comes up with, and add the following bit of code in it.

_



Public Function SearchData(ByVal Search As String) As String


Return String.Format("You searched for: {0}. The time now is: {1}.", _


Search, DateTime.Now)


End Function

Now create a new Web form page in VS and make sure you select the master page you created above (this is to ensure that the Atlas JavaScripts are automatically included on the page.) 

Go into the source of the page and within the main contentplaceholder element, add the following code:

The first two elements give a simple search box and the span element will hold the results when it arrives asynchronously. The last script element is where the magic happens. 

This element provides a wrapper around the Web service named in the source. As you can see, the SearchService.asmx is what is referenced here as well as a suffix of '/js'. This adds on certain capabilities to the caller to pass on to the service and receive results back.

To call this, add the following code, right below the code written above.

The 'DoSearch' function is called when the user clicks on the Search button. This simply gets the text element and calls the SearchService's SearchData Web service method with the value in the box. 

However, it also adds a new parameter to this call-ShowResults. This is the callback function, the code to call when the asynchronous call returns to the page. This, of course, can be named anything you want.

The ShowResults code accepts a results parameter in XML from the Web service. All that it does then is insert the code into the page. When you execute this page, you can enter a search text and click on the Search button. 

You will immediately see the results without the page being submitted to the server.

While nice, it does not yet show the cool features of Atlas where you can achieve all of the above and more without even writing code. 

Next month, we will simulate Google Suggest's word list with none or little code using Atlas and AJAX.

Vinod Unny, Enterprise Infotech