ICallback & JSON Based JavaScript Serialization
 
Published: 10 Jan 2008
Abstract
In this article, Muhammad examines how to accomplish JavaScript Serialization using ICallback and JSON. He begins with a basic introduction to ICallback, ICallbackEventHandler interface, and JSON. He then delves deep into the implementation of both server and client side ICallback with the help of associated source code.
by Muhammad ADnan Amanullah
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 43122/ 76

Introduction

While working in ASP.NET, sometimes we need to call server side methods asynchronously without having a postback. Sometimes it is either a full page postback or partial page postback. But thanks to the ASP.NET team, we are provided implementation of ICallback very easily.

ICallback

ICallback is lightweight process. It uses well known XMLHTTP object internally to call server side method. It does not cause page postback and does not cause page rendering. If we are to show output at the client side, we need to make output HTML ourselves and render the controls manually.

ICallbackEventHandler

ICallback is implemented in ASP.NET by using ICallbackEventHandler interface. It has two methods; one of them is used to call from JavaScript (client side code) and other one returns the result asynchronously back to the JavaScript function.

We just need to perform some action through server side code at server side. It then needs to return the results, but results are in instance or object of any class which would not be easy for JavaScript code to handle. Here we prefer JSON which stands for JavaScript Object Notation.

JSON

JSON is a lightweight, data-interchange format. ASP.NET gives good support for JSON as well. It is rapidly adopting because it is easy read by human and machine as well.

ICallback Server Side Implementation

Let us first implement ICallbackEventHandler to call the server side method asynchronously step-by-step

Implement Server Side (C#) Page/Control class by System.Web.UI.ICallbackEventHandler.

The following are the definition of two methods which we need to implement.

RaiseCallbackEvent method invoke through JavaScript function.

Listing 1

public void RaiseCallbackEvent(string eventArgument)
{
  //to do code here
}

GetCallbackResult method invokes itself when the processing of RaiseCallbackEvent method is completed.

Listing 2

public string GetCallbackResult() 
{
  return "";
}

In Page_Load or Page_Init event the following statements are used to register client side methods.

CallServer(arg, context), as the name implies, would use call/raise server side method which was RaiseCallbackEvent string eventArgument).

ReceiveServerData(arg, context) would get the result through arg parameter by GetCallbackResult().

Listing 3

protected void Page_Load(object sender, EventArgs e)
{
ClientScriptManager scriptMgr = Page.ClientScript;
String cbReference = scriptMgr.GetCallbackEventReference(this"arg""ReceiveServerData""");
String callbackScript = "function CallServer(arg, context) {" + cbReference + "; }";        
scriptMgr.RegisterClientScriptBlock(this.GetType(),"CallServer", callbackScript, true);
}

ICallback Client Side Implementation

Listing 4

<script language=javascript type=text/javascript>
function ReceiveServerData(arg, context)
{
  alert(arg); //just to show output
} 
function CallSrv()
{
  CallServer('get customer', '');
}
</script>
<input type="button" value="get customer" onclick="CallSrv()" />

That is it. These are the steps which you need to use to call and get results from the server side code using ICallback.

Now we will go ahead with some very easy steps for JSON based JavaScript serialization to return results in JavaScript's easily parseable format.

Suppose we have the following class whose object we need to return to JavaScript function through JavaScript serialization.

Sample Class:

Listing 5

public class Customer
{
  public string Name;
  public int Age;
}

JSON Code

Declare string jsonResult at the class level, which would be used to contain final results and returns.

After some sample code in both methods, the code will look like the following:

Listing 6

public void RaiseCallbackEvent(string eventArgument)
{
  //populate Customer object to return
  Customer customer = new Customer();
  customer.Name = "Muhammad Adnan";
  customer.Age = 24;
  //javascript serialization of Customer object
  System.Web.Script.Serialization.JavaScriptSerializer jss;
  jss = new System.Web.Script.Serialization.JavaScriptSerializer();
 
  //stringbuilder to contain serialized customer object
  System.Text.StringBuilder sbCustomer = new System.Text.StringBuilder();
  jss.Serialize(customer, sbCustomer);
 
  jsonResult = sbCustomer.ToString();
}
 
public string GetCallbackResult()
{
  return jsonResult;
}

Asynchronously output would be within a millisecond and without Postback.

Figure 1

Conclusion

Callback is a lightweight technique used to call server side methods asynchronously from JavaScript without any postback and reloading/rendering of unnecessary parts of page and unnecessary code.

So we can use that when we need to perform any operation at backend means at server, like update records in database, etc. You do not need to send all your contents of page in request and make that object heavyweight which could cause slow performance.

JSON is lightweight, data-interchange format to make server side class objects easily parseable by client side code to show output on a browser. I used JavaScript serialization technique to convert server side entity into client side entity to make it accessible/readable/useable at client side.



User Comments

Title: gh   
Name: ghgh
Date: 2012-07-16 2:53:08 AM
Comment:
ghgh
Title: Problem in JQuery autocomplete with asp.net callback using ICallbackEventHandler   
Name: Anuj Rathi
Date: 2012-06-30 10:19:21 PM
Comment:
Hi,
I also love ICallback feature of .net & I always use it instead of other Ajax call. I am facing a problem with jquery autocomplete when I use Callback.

Please have a look below post:
http://forums.asp.net/t/1802972.aspx/1?Problem+in+JQuery+autocomplete+with+asp+net+callback+using+ICallbackEventHandler

Please give me any suggestion.
Title: 5   
Name: 5
Date: 2012-06-07 3:41:30 AM
Comment:
5
Title: Re: Mustafa   
Name: Author
Date: 2011-07-07 6:46:42 AM
Comment:
you need to deserialize json to javascript.

check this http://www.json.org/js.html

HTH
Title: Superb   
Name: Mustafa
Date: 2011-07-07 6:28:18 AM
Comment:
Thingking in C++ (OOP), Web Applications has been tough for me. Thanks you made it quite easy to digest.
Just a question (I am new to Javascript), How do I convert{"Name":"Muhammad Adnan","Age":24} back to Javascript structure so I can access it like this, var strName = arg["Name"]?
Title: RaiseCallBack   
Name: siva
Date: 2011-02-08 6:30:51 AM
Comment:
very nice...
Title: hi   
Name: how r u
Date: 2010-03-28 11:21:18 AM
Comment:
That's Nice
Title: oh,yeah   
Name: cristian
Date: 2010-01-05 4:37:31 AM
Comment:
good article
Title: RaiseCallBackEvent   
Name: Anil Trimbake
Date: 2009-02-27 10:34:39 AM
Comment:
Its really amazing!
Title: Re: cm object?   
Name: Brendan Enrick
Date: 2009-01-19 8:39:06 AM
Comment:
@Jeff thank you for pointing this out.

@Muhammad Adnan I have corrected the code in Listing 3. Please make sure everything is correct now. Have a great day.
Title: Re: cm object?   
Name: Author (Muhammad Adnan)
Date: 2008-04-09 9:25:45 AM
Comment:
sorry its my mistake.
it should be scriptMgr rather than cm
and should be like this
scriptMgr.RegisterClientScriptBlock(this.GetType(),"CallServer", callbackScript, true);

thanks for pointing out and being cause of correction.
Title: cm object?   
Name: jeff
Date: 2008-04-09 7:12:06 AM
Comment:
In the Page_Load of your sample you call RegisterClientScriptBlock from an object called "cm". Where does that object come from?
Thanks.
Title: RE: Gorhal   
Name: Author
Date: 2008-03-16 1:58:34 PM
Comment:
what if you have to call method of you page class or any class which is not web service class :) and sometimes clients doesn't feel confident about to use any third party library (i mean JAYROCK) then what? :)

anyhow approaches are 1000000000. i tried to cover up few things like callback, json, javascript serialization in simple and basic manner.

i hope if u look in that way u will feel it better

thanks :)
Title: Re: S.Aprelov , Brandon M. Hunter   
Name: Author
Date: 2008-03-16 1:44:46 PM
Comment:
for more details about callback and for having more better real time example i would prefer you to look at my another article on this link http://aspalliance.com/1537

hope you find that more appropriate. thanks,
Title: Good Article   
Name: Brandon M. Hunter
Date: 2008-03-16 7:36:50 AM
Comment:
Good Article, but I agree with S.Aprelov, I would like to see more "real world" examples, but overall its a good article.

Thanks for the article.
Title: Nice but...   
Name: gorhal
Date: 2008-03-15 8:35:59 PM
Comment:
Nice article!

But I would prefer to use a webservice from javascript. And when using JSON, I would recommend Jayrock. It really rocks ;)
Title: In Response to Author' Reply   
Name: Bobo
Date: 2008-03-13 8:47:53 AM
Comment:
Thanks for your immediately reply,Muhammad,I'm reading the article you recommended.

Best regards.
Title: Re: Good but not so   
Name: Muhammad Adnan (Author)
Date: 2008-03-13 1:29:01 AM
Comment:
Thanks for your feedback. Actually, everything couldn't be clear about any topic in a single article. For more details on this topic with different scenario, i would like to refer you to next version of this article which is posted on following link http://aspalliance.com/1573 i hope you find that in more detail

best regards,
Title: Good but not so   
Name: Bobo
Date: 2008-03-12 10:38:11 PM
Comment:
Good article,but not so clear and detailed. More is required.
Title: Excellent Effort   
Name: Ali Raza CT0-247
Date: 2008-02-21 1:41:15 AM
Comment:
Woo Thats great
Now i can enjoy with JSON... thx Adnan....
Title: good aticle   
Name: king
Date: 2008-01-30 9:54:28 PM
Comment:
thank you,i know how to use json now!
Title: Excellent Effort   
Name: Abdul Mannan CT0-247
Date: 2008-01-10 2:10:05 AM
Comment:
Now i can enjoy with JSON... thx Adnan....

Excellent
Title: Great Artical   
Name: CTO-Shaukat
Date: 2008-01-10 2:08:32 AM
Comment:
Nice article on ICallback and JSON. Keep it up adnan

Thanks
Title: Good One   
Name: Shakeeb Younas
Date: 2008-01-09 8:09:41 AM
Comment:
Good Work
Title: very good article   
Name: Imran Tareen
Date: 2008-01-09 8:09:06 AM
Comment:
very knowledge full article.
Title: Good Article   
Name: Zeeshan Fawad
Date: 2008-01-09 6:52:49 AM
Comment:
Nice Article Sir...
Title: Good Job   
Name: Ejaz Anwer
Date: 2008-01-09 3:14:53 AM
Comment:
Keep it up.
Title: its really helpful   
Name: Tehreen
Date: 2008-01-08 11:07:59 AM
Comment:
Good Job Sir!!!!! keep it up.
Title: Call back use   
Name: M Nadeem
Date: 2008-01-08 4:40:52 AM
Comment:
Its a nice article to use JSON with asp.net the use of AJAX technology. It simple, short and comprehensive article for understanding. I wanna say thanks to adnan because i got the great vision of AJAX in this article in very short time and i can refer to my other friends as well to tell them about this functionality in very short manner.

Regards,

M Nadeem
Title: Good Article   
Name: Kauser
Date: 2008-01-08 3:34:12 AM
Comment:
I read this article and I feel that its quite informative and easy to understand. I really like your way of writing. Good Effort!
Title: Nice article   
Name: shahzad sarwar
Date: 2008-01-08 2:45:48 AM
Comment:
Nice article on ICallback and JSON. Keep it up adnan.
Title: gr8 article   
Name: John
Date: 2008-01-08 2:37:57 AM
Comment:
by this article i get to know many new things like callback, json, js serialization which i never even bother and now i have plenty of places where i could utlize it. keep it up man :)






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


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-08-25 3:03:16 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search