Using ICALLBACKEventHandler in ASP.NET

ASP.NET 2.0 introduced an interface named ICallbackEventHandler (System.Web.UI.ICallbackEventHandler) to allow asynchronous communication with the server. Unlike Postback, in Callback only user defined information is sent to the server. Instead of using Postback to post the page, ICallbackEventHandler uses the DoCallback event to send user defined data to server, and return a String to client; on the client-side JavaScript can then manipulate the string. In total we have to use four functions for the implementating ICallbackEventHandler; two client side functions (in javascript) and two server side functions (C# in this case).

Use of ICallbackEventHandler:

To use ICallbackEventHandler, we will need to inherit it on the page or in a user control. The code will for this will be:

public partial class Default2 : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler

As a result of inheriting from ICallbackEventHandler, we have to implement two functions, namely:

* public void RaiseCallbackEvent(String eventArgument)
* public String GetCallbackResult()

As name of the above two functions indicates, the first function gets called automatically whenever there is a CallbackEvent. After the first function the second function i.e. GetCallbackResult gets called and returns a string to the client

So how to raise a CallbackEvent? For this we will have to use javascript. There will be two javascript functions:

1. A function which will call RaiseCallbackEvent.
2. A function which will handle the response from the server. This function will be called automatically after GetCallbackResult() and the string returned by GetCallbackResult will appear in JavaScript as input to this function.

Implementing ICallbackEventHandler

1. Create an ASPX page as follows

<body>
<form id="form1" runat="server">
<div>
Select The Item and Click the Button
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
<br />
<br />
<button type="Button" onclick="CheckForTimeZone()">Get Timezone</button>
<br />
<table><tr>
<td>GMT Time zone is :</td>
<td><div id="Results" runat="server"></div></td>
</tr></table>
<br />
</div>
</form>
</body>

In above code “CheckForTimeZone()” in the button tag is a javascript function which we will add later. Also note that the button is a simple HTML control.

2. JavaScript in the Aspx page.

function CheckForTimeZone()
{
var lb = document.getElementById("DropDownList1");
var selectedItem = lb.options[lb.selectedIndex].text;
CallServer(selectedItem, "");
}

function ReceiveServerData(retValue)
{
document.getElementById("Results").innerHTML = retValue;
}

</script>

In above code CallServer(selectedItem, "") will be responsible for calling RaiseCallbackEvent on server side. And the ReceiveServerData(retValue) function gets called by GetCallbackResult().
To make above code work the way we want; we will need to add some code to the aspx.cs file.

3. Server-Side C# code (i.e. apsx.cs file)

public partial class Default2 : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
{
private static Hashtable hashTable;
protected String returnValue;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
String cbReference =
Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
String callbackScript;
callbackScript = "function CallServer(arg, context)" +
"{ " + cbReference + ";}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"CallServer", callbackScript, true);

hashTable = new Hashtable();
hashTable.Add("Hawaii", "GMT -10:00");
hashTable.Add("Central America", "GMT -06:00");
hashTable.Add("Greenland", "GMT -03:00");
hashTable.Add("Athens", "GMT +02:00");

DropDownList1.DataSource = hashTable;
DropDownList1.DataTextField = "key"; //If you say value Values from HashTable will be added to Drpdownlist
DropDownList1.DataBind();
}
}

In the above code, please note the following:

String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
If we debug the code “cbReference” it will contain “WebForm_DoCallback('__Page',arg,ReceiveServerData,context,null,false)
”; . Observe that the string, WebForm_DoCallback contains ReceiveServerData, it’s the javascript function we have written in step 2.

String callbackScript;
callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + ";}";
Again “callbackScript” will contain some string. Actually it is a JavaScript function which we will register to the client page. Using

Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"CallServer", callbackScript, true);
This registers our CallServer function on the page. We are essentially passing the selected item of the Dropdown list to the CallServer function if you see the source code of the output page the CallServer function will appear as follows:

This CallServer function is responsible for raising the callbackEvent ( i.e. RaiseCallbackEvent(String eventArgument) ) and the “arg” will be the eventArgument.

4. Finally add RaisecallbackEvent and GetCallbackResult.

Add following code to aspx.cs file
public void RaiseCallbackEvent(String eventArgument)
{
if (hashTable[eventArgument] == null)
{
returnValue = "-1";
}
else
{
returnValue = hashTable[eventArgument].ToString();
}
}
public String GetCallbackResult()
{
return returnValue;
}

The above code provides the basic plumbing to implement asynchronous callbacks using ICALLBACKEventHandler. In subsequent articles we will extend this to real world applications and develop an AJAX-enabled GridView control.

References:

http://msdn.microsoft.com/en-us/library/ms178208.aspx

http://ajax-matters.blogspot.com/2009/01/icallback-event-handler.html

Posted via email from fenildesai's posterous