·         Microsoft Windows XP Professional

·         VS 2005

·         AJAXToolkit 1.0

Server Centric

          There are two ways of AJAX that can be implemented using AJAXToolkit. One is the most popular method, Server Centric (using Update panel) and another one is Client Centric. There are several reasons (given below) why the server centric became so much popular.

·         Server centric takes very less time to implement.

·         From a developer point of view, it is very easy to implement. Just put your controls inside an UpdatePanel and ScriptManager will do rest of the job.

·         It keeps the developer free from JavaScript and developer can concentrate only on server side.

·         Requires less effort.

But everything in this world comes with a cost. There are also several drawbacks that come along with this approach.

·         Though it does not show but internally it completes the whole page life cycle once again, which actually violates the basics of AJAX. But for an end user it never matters.

·         As it completes the total page life cycle again and hence for better performance client centric is having an edge.

Client Centric

·         This is the most preferred approach for better performance.

·         It is completely in adherence to the rules of AJAX.

·         Though its time taking to implement, but its worthy to spent time on it.

Lets move step by step to get a complete hold on this.

Create an AJAX enabled website

          Create an AJAX Enabled web site for this example. Ajax enabled website is same as normal .net website but having few more additional tags in web.config.

Add Webservice and Javascript

          Add a webservice (MyService.asmx) to the project. Also add a JS file (Jscript.js) to do the client side activities. Basically we are going to call the Webmethods present in the websevice through java script.

Add ScriptManager

          Add a ScriptManager to the MasterPage with tags as shown below.

Listing 1

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="JScript.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="MyService.asmx" InlineScript="true" />
</Services>
</asp:ScriptManager>

Do necessary changes to the webservice

          You need to add the ScriptService attribute to the webservice class. Then add your own webmethod. Here we have added a GetServerTime() method.

Listing 2

[WebMethod]
public string GetServerTime()
{
    return DateTime.Now.ToString();
}

Test the Webservice, see if it generates the client proxy

          After this you should be able to test whether your webservice is ready to receive calls from the javascript. Basically the webservice URL followed with “/js” or “/jsdebug” will allow you to download the resulting client proxy. This is possible because of the presence of Scriptservice Attribute for Webservice class.

          If you will save and open this file, you will find that there will be necessary client proxy entry for each of the webmethods present in webservice.

The following prompt ensures that the webservice is correct and ready to use.

Figure 1

Get the result by running the application

          After this, create a button and run the following javascript function on the button click.

Listing 3

// JScript File
function GetTime()
{
    MyService.GetServerTime(onSuccess,onFailed);
    return false;
}

          Here onSuccess and onFailed are the name of the functions (similar to delegates) that will be executed eventually at the success and failure of the AJAX Call. The definitions of them are given below.

Listing 4

function onSuccess(result)
{
    alert("Current time is: " + result);
}

Listing 5

function onFailed(result)
{
    alert("Error [" + result._statusCode + "] : " + result._message);
}

Finally it will look like this:

          This is almost similar to the PageMethods concept. In PageMethods there is no need to create a web service for AJAX functionality. Rather your javascript can directly call a method (should be marked as [WebMethod]) present on the code behind file of a .aspx page.

          It can be said that Client centric approach might have evolved from theICallbackEventHandler, but actually it is much ahead of ICallbackEventHandler. Few differences are given below:

1.    In ICallbackEventHandler, only string types can be supplied to the server as argument. And only string types can be received from server. But in client centric approach the parameter types and number of parameters are of no constraint. One can supply n number of parameters to the server and these can be of anytype.

2.    ICallbackEventHandler was never Jserialisable. But through this newer approach Jserialization is possible. As a result of which a server can return a datatable, dataset and your Javascript is now capable enough to receive them. (Yes, it was never ever possible in ICallbackEventHandler).

3.    One more magic, now using Jserialization of Client Centric, you can create objects of your server side classes at client side. It may not sound so interesting, but if you start thinking, it was also never possible to create an instance of a class in your javascript. But now this is also very much possible.

Download

          Link: http://authors.aspalliance.com/Sacharya/AJAXEnabledWebSite1.zip