AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1909&pId=-1
Client Centric Approach of AJAX using Toolkit
page
by Sandeep Acharya
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 30596/ 56

Introduction

Today everything is changing very rapidly and technology is of no exception. Traditional web page with boring look and feel has gone obsolete. In that rhythm requirements are also changing. Among all these changes AJAX has become very popular now a days. And why not, it is so attractive and beautiful that everybody would love to have it on their web pages. It saves time for end user, saves resources for server and after all gives a new look and new experience for web browsing.

System Requirements

·         Microsoft Windows XP Professional

·         VS 2005

·         AJAXToolkit 1.0

Server Centric Vs Client Centric

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.

How to accomplish Client Centric – Example

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:

 

Similarities with PageMethods

          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.

Differences with IcallbackEventHandler

          It can be said that Client centric approach might have evolved from the ICallbackEventHandler, 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.

Conclusion

          By now one must have realized that why AJAX is so popular and why client centric approach is advisable. It brought a new era to the world of AJAX. AJAX programming has never been so interesting till date. I remember few years back in the age of manual AJAX, developers used to have a headache for such things, which is now very much doable in seconds using Client Centric approach of AJAX Toolkit. And think of the widely opened possibilities. Yes, we all have to agree that the new era of web development has stepped in and a long way to go.

Download

          Link: /download/1909/AJAXEnabledWebSite1.zip

 



©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 9:55:44 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search