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:
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:
public void RaiseCallbackEvent(string eventArgument)
{
}
The GetCallbackResult
method invokes itself when processing of the RaiseCallbackEvent
method is completed:
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()
.
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()” />
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
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:
public void RaiseCallbackEvent(string eventArgument)
{
Customer customer = new Customer();
customer.Name = "Muhammad Adnan";
customer.Age = 24;
System.Web.Script.Serialization.JavaScriptSerializer jss;
jss = new System.Web.Script.Serialization.JavaScriptSerializer();
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.