Click here to Skip to main content
15,867,985 members
Articles / Web Development / XHTML

ICallback and JSON based JavaScript Serialization

Rate me:
Please Sign up or sign in to vote.
3.86/5 (3 votes)
20 Dec 2007CPOL2 min read 33.2K   11   2
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.

Introduction

Whilst working with ASP.NET, sometimes we need to call server side methods asynchronously without having to postback whether it is full page postback or a partial page postback. Thanks to the ASP.NET team for providing the implementation of ICALLBACK.

ICALLBACK

ICALLBACK is a lightweight process. It uses the well known XMLHTTP object internally to call a server side method, it doesn’t cause a page postback so doesn’t cause page rendering, so we show the output at the client side. We need to make the output HTML ourselves and render the controls manually.

ICALLBACKEVENTHANDLER

ICALLBACK is implemented in ASP.NET by using the ICALLBACKEVENTHANDLER interface and it has two methods: one of them is used to call from JavaScript (client side code) and the other returns results asynchronously back to the JavaScript function.

We just need to perform some action using server side code at the server side and return results, but results could be an instance or object of any class which need not be easy for the JavaScript code to handle easily, so here we prefer JSON which stands for JavaScript Object Notation.

JSON

JSON is lightweight data-interchange format. ASP.NET gives good support for JSON as well. It’s rapidly being adopted because it is lightweight and easily readable by humans and machines.

Callback Server Side Code

Let’s first implement ICALLBACKEVENTHANDLER to call a server side method asynchronously step by step:

<il>

Implement the server side (C#) page/control class using System.Web.UI.ICallbackEventHandler. Following are the definitions of the two methods which needs to be implemented:

The RaiseCallbackEvent method is invoked through a JavaScript function:

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

The GetCallbackResult method invokes itself when processing of the RaiseCallbackEvent method is completed:

C#
public string GetCallbackResult() 
{
  return ""; 
}

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

CallServer(arg, context), as the name implies, is used to call/raise the server side method RaiseCallbackEvent string eventArgument).

ReceiveServerData(arg, context) is used to get the result through the arg parameter by GetCallbackResult().

C#
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 + "; }"; 
	cm.RegisterClientScriptBlock(this.GetType(),
	  "CallServer", callbackScript, true); 
}

Callback Client Side Code

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

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

Now we will see some very easy steps for JSON based JavaScript serialization to return results to JavaScript in an easily parseable format.

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

Sample Class

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

JSON Code

Declare the string jsonResult at class level, which would be used to contain the final result for returning.

The sample code in both methods will look like the following:

C#
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; 
}

Asynchronous output would be available within a millisecond and without postback.

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.

JSON is a lightweight data interchange format to make server side class objects easily parseable by client side code to show the output on the browser.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Candoerz
United Kingdom United Kingdom
trying to have can do attitude. Candoerz.com

Comments and Discussions

 
General"how to insert data in sql table using Json and icallback eventhandler" Pin
Sreeraam_d13-Dec-12 2:03
Sreeraam_d13-Dec-12 2:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.