Got an AJAX Sample working with ASP .net 2.0

Well, not really gruelsome, but its definitely interesting.
I had a small demo of AJAX working with ASP.net 2.0 and of course - it works :).

AJAX (Asynchronous Javascript and XML) is not really a technology in itself. But it is based on some really cool things that were quite tedious to implement in the good old ASP days. The AJAX basically leverages the XML HTTP functionality that was used for some real jazzy UIs in past (Albeit, in the past, it was much much more complex to implement).
AJAX now offers an easy to use framework that can be used to build really rich web applications.

What I did with it was a really simple demo that just queries the time from the server based on the values selected in the client side Combo Box. And the page fetches the values from the server WITHOUT REFRESHING. Oh of course thats what it is supposed to do.

Well, lets get to know HOW.

First of all you will need to download the AJAX Assemblies from here. Once done, just create a small ASP.Net project. Add a reference to AjaxPro.2.dll and you are good to go. Be sure you use the HTML controls on the page (they load faster).
For a method to be "callable" from the client side, it needs to be an "AjaxMethod".

Include the AjaxPro namespace as -

using AjaxPro;

And then define your method in the cs file as -

[

AjaxMethod]
public string GetCurrentServerTime(string sType)
{
   if (sType == "SHORT")
{
      return DateTime.Now.ToShortTimeString();
}else 
{
         if (sType == "LONG")
{
            return DateTime.Now.ToLongTimeString();
         }
         else 
         {
            return DateTime.Now.ToUniversalTime().ToString();
         }
      }
}

The AjaxMethod attribute actually takes care that the method can be called from the client side.
In addition to this, there are two small changes that you need to do on the server side -

1. Add the following entry to your web.config file (under System.Web) -

<

httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>

2. And then Register the type with AJAX with the following statement in the Page_Load()

Utility.RegisterTypeForAjax(typeof(_Default));

Thats it on the server side.

On the client side, I simply have a combo box that tells the format in which I want my time and the texbox that just displays the time.

<select id="TimeFormat" name="TimeFormat" onchange="javascript:getTime()">
<option value="SHORT" selected="selected">Short Time</option>
<option value="LONG">Long Time</option>
<option value="UNIV">Universal Time</option>
</select>
<input type="text" id="timetext" />

In the Javascript, I simpy have two methods that perform all the async stuff for me -

function getTime()
{
AJAX.Samples._Default.GetCurrentServerTime(document.all.TimeFormat.value,getTime_callback); // asynchronous call
}

// This method will be called after the method has been executed and the result has been sent to the client.

function getTime_callback(res)
{
document.all.timetext.value = res.value;
}

The first method "getTime()" actually gives a call to the server side method. It specifies two parameters - the first one is the sType parameter that your server side method expects. The second one is the callback method that will be invoked once the data is fetched from the server.
In the callback method, we simply assign the res.value to the textbox.

Although, I have tried to give you a starter here on the AJAX stuff, this link would provide a lot more samples for you to take a look.
Also, there is another article on msdn that talks about AJAX development with ASP.Net.

--Sanket