Client Centric Approach of AJAX using Toolkit
 
Published: 12 Jan 2010
Unedited - Community Contributed
Abstract
In this article, the author discusses the client-centric approach for AJAX using the ASP.NET AJAX Toolkit. In general, server-centric (use of Update panel) is very popular in this field. But when it comes to performance, the client-centric approach is preferred. Sandeep also demonstrates how to call a webservice using javascript.
by Sandeep Acharya
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 30602/ 55

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

 



User Comments

Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-07-02 10:09:26 AM
Comment:
http://www.jersey2shop.com
http://www.cheapjersey2store.com
http://www.jerseycaptain.com
http://www.yourjerseyhome.com
We are professional jerseys manufacturer from china,wholesal.cheap nike nfl jerseys, mlb jerseys, nhl jerseys,nba jerseys and shoes
Cheap NFL,NBA,MLB,NHL
,heap jerseys,2012 nike nfl Jerseys,nba jersey and shorts,oklahoma city thunder jersey,official jeremy lin new york knicks jersey,NFL Jerseys Wholesale,blake griffin jersey blue,NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
,Wholesale cheap jerseys,Cheap mlb jerseys,]Nike NFL Jerseys,Cheap China Wholesae,Wholesale jerseys From China,2012 nike nfl Jerseys,Jerseys From China,,2012 nike nfl Jerseys,Revolution 30 nba jerseys,jersey of nba chicago bulls direk rose ,nfl jerseys,green bay packers jerseys wholesale,Buffalo Bills nike nfl jerseys sale,good supplier soccer jerseys,cool base mlb jerseys,Revolution 30 nba jerseys,2012 stanley cup nhl jersey,
We are professional jerseys manufacturer from china,wholesal.cheap nike nfl jerseys, mlb jerseys, nhl jerseys,nba jerseys and shoes. www.yourjerseyhome.com
Title: mamu   
Name: nanda
Date: 2012-06-08 4:27:19 PM
Comment:
I just wondered for the date it was published
Title: The Author   
Name: Sandeep
Date: 2010-05-06 12:35:04 PM
Comment:
Yuvaraj,

you should click on the "View entire article" to see the whole article. And FYI...this format is a mandate from ASP Alliance. I m helpless if u r nt happy with the format.

Sandeep
(Author)
Title: my comment   
Name: Yuvaraj
Date: 2010-05-06 7:18:43 AM
Comment:
Firstly change your article format. It's really irritating. Just to read few lines or paragraphs, we need to go for new page, making new request is really non-sense.
Title: ajax coding   
Name: animesh
Date: 2010-02-22 8:22:33 AM
Comment:
give the notes
Title: For Sakhi   
Name: Sandeep Acharya
Date: 2010-01-20 1:32:09 PM
Comment:
Thanks Sakhi for your comment. Regarding JSerialisation, you first have to know what is serialization. Serialization is the way of converting an object to a stream of bytes. Now in JSerialization, u will be able to convert a serverside object to stream bytes and that can be received at client (Javascript) end. At clientside it will be treated as a JS object. Dont worry, this method (client centric) of AJAX supports JSerialization to full extent. So u can create instances of the server side classes at clientside. You can also return objects like Datatable, Datarow etc from your method and receive them as it is in your client side JS end. All these are possible just because of Jserialization. Hope it clears your doubt.

Thanks
Sandeep
Title: gr8 job   
Name: Hrishi4uonly
Date: 2010-01-20 10:36:18 AM
Comment:
very good keep it up mamu
Title: JSerializable   
Name: Sakhi
Date: 2010-01-20 4:40:01 AM
Comment:
Article is good. But can you tell me what is JSerialization?
Title: nice article   
Name: dave
Date: 2010-01-18 8:45:18 AM
Comment:
Very nicely demonstrated. Gr8 job man.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 8:58:02 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search