ICallback & JSON based Javascript Serialization

client side code screenshot   server side code screenshot

Whilst working in asp.net sometimes we need to call server side methods asynchronously without have postback either it is full page postback or partial page postback so thanks to asp.net team to provide implementation of ICALLBACK very easily. 

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

 ICALLBACKEVENTHANDLER ICALLBACK implemented in asp.net by using ICALLBACKEVENTHANDLER interface has two methods, one of them used to be call from javascript (client side code) and other one return result asynchronously back to javascript function. We just need to perform some action through server side code at server side and needs to return results but results could are in instance or object of any class which could be not easy for 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 adopting because of its lightweight and easy to readable by human and machine as well.

 CALLBACK SERVER SIDE CODE Let’s first implement ICALLBACKEVENTHANDLER to call server side method asynchronously step by step J 

Implement Server Side (C#) Page/Control class by

 System.Web.UI.ICallbackEventHandler

 Following are definition of two methods which needs to implement: 

RaiseCallbackEvent method invoke by thru javascript function

public void RaiseCallbackEvent(string eventArgument)

 {  //to do code }

 GetCallbackResult method invoke itself when processing of RaiseCallbackEvent method completed 

public string GetCallbackResult()          

 {              return “”;         }

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

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

ReceiveServerData(arg, context) would use to get result through arg parameter by GetCallbackResult()

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

<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()” /> 

Thants it. These are the steps which you need to use to call and get result from server side code using ICALLBACK. Now we will go ahead for some very easy steps for JSON based javascript serialization to return results in javascript easily parseable format.  Suppose we have following class whose object we need to return to javascript function through javascriptserialization.

  SAMPLE CLASS

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

JSON CODE declare string jsonResult;

at page/control class level,

which would be use to contain final result and return. After some sample code in both methods code will look like the following: 

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 J output  

Conclusion:Callback is 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 lightweight data interchange format to make server side class’ objects easily parse able by client side code to show output on browser.  

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s