Client Callbacks in ASP.NET 2.0

Introduction

Over the last few weeks I have been writing about AJAX and ASP.NET (Part 1, Part 2, Part 3 and Part 4). AJAX model reduces server post backs using client script and XMLHTTP. Now that ASP.NET 2.0 is released, let's see what it has to offer to do the same thing. ASP.NET 2.0 allows you to execute server side code from your client browser via a feature called as "Client Callback". In this article I will explain what Client Callbacks are and how to program them in your web forms.

What are Client Callbacks?

The default page processing model in ASP.NET is post back oriented. That means when you click a post back causing control (such as button) your form gets submitted back to the server. Server side events are raised and the entire page output is sent back to the client. This can cause significant network overhead. The Client Callback feature allows you execute code from a web form without posting the form back to the server. You just retrieve the required value and update a small part of the overall UI. This way you save the amount of data passed over the network. It also improves the user experience because of quicker response time.

Classes and JavaScript functions involved

The main used while working with client callbacks is ClientScriptManager. This class is used to manage client side script emitted by your page. The Page.ClientScript property returns an instance of this class for you which is attached to the current web form by ASP.NET framework.

In a typical usage you are required to write three JavaScript functions to implement client callbacks:

• One that calls the server (CallServer in the example below)
• One that calls the above function when you click on a post back causing control (SendCustomerID in the example below)
• One that receives the data returned when the call is over (ReceiveServerData in the example below)

As an example we will develop a web form with a DropDownList and a ListBox. The DropDownList is filled with CustomerIDs from Customers table of Northwind database. The ListBox displays the OrderIDs for a selected customer.

Registering the client side functions with the page framework

In order to register the above functions with the page framework you need to write the following code in the Page_Load event:

ClientScriptManager m = Page.ClientScript;
string str = m.GetCallbackEventReference
(this, "args", "ReceiveServerData", 
"'this is context from server'");
string strCallback = "function CallServer(args,context)
{" + str + ";alert(context);}";
Page.ClientScript.RegisterClientScriptBlock
(this.GetType(), "CallServer", strCallback, true);

Here,

• We got the reference of ClientScriptManager instance associated with the current page using Page.ClientScript property
• We then called GetCallbackEventReference method. This method generates the required markup to call the server from the client. You need to pass name of the client function parameter that acts as arguments, Name of the client function that receives the server data and a context string.
• The GetCallbackEventReference function returns the required script as a string. You need to wrap this string in a client side function (CallServer in above example).
• Finally you need to emit this function using RegisterClientScriptBlock method

You also need to write a client side function that actually calls the CallServer function when user changes CustomerID from the DropDownList. You do this using Attributes collection.

DropDownList1.Attributes.Add("onchange",
 "return SendCustomerID();");

Here, we attach a client side function called SendCustomerID to the client side OnChange event of the DropDownList.

Implementing ICallbackEventHandler interface

In addition to registering the client side functions, you also need to implement an interface called ICallbackEventHandler on your web form class. This interface contains two methods - RaiseCallbackEvent and GetCallbackResult. The former gets called when the client calls the server and the later is called when the server returns the data back to the client. The following code illustrates how these functions can be used.

public partial class _Default : 
System.Web.UI.Page,ICallbackEventHandler
{
public string GetCallbackResult()
{
 return str;
}

public void RaiseCallbackEvent(string eventArgument)
{
SqlDataAdapter da = new SqlDataAdapter
("select orderid from orders where customerid='" 
+ eventArgument + "'", 
@"data source=.\sqlexpress;initial catalog=northwind;
integrated security=True");
DataSet ds=new DataSet();
da.Fill(ds);
str=ds.GetXml();
}

In the RaiseCallbackEvent method we simply filled a DataSet with records matching the selected CustomerID and assign the XML representation of it to a string variable str. This variable is returned to the client in the GetCallbackResult method.

Client Side Functions

The client side functions that you need to write are shown below:

function SendCustomerID()
{
var id=document.getElementById("DropDownList1").value;
CallServer(id,"This is context from client");
return false;
}

function ReceiveServerData(args, context)
{
alert(context);
var obj = new ActiveXObject("MsXml2.DOMDocument");
obj.loadXML(args);
var dsRoot=obj.documentElement; 
var ddlOrders = document.getElementById("ListBox1");
for (var count = ddlOrders.options.length-1; 
count >-1; count--)
{
ddlOrders.options[count] = null;
}
var orders = dsRoot.getElementsByTagName('orderid');
var text; 
var listItem;
for (var count = 0; count < orders.length; count++)
{
text = (orders[count].textContent || 
orders[count].innerText || orders[count].text);
listItem = new Option(text, text, false, false);
ddlOrders.options[ddlOrders.length] = listItem;
}
}

In the SendCustomerID function we get the selected CustomerID and invoke the CallServer function with it.

In the ReceiveServerData function we receive the XML representation of DataSet (that we returned from GetCallbackResult method. We then populate the ListBox from that data.

Download

The complete source code of the above example is available for download. Please click on the Download Source Code button at the top of this article.

Summary

ASP.NET 2.0 client callback feature allows you to call server side code without making any post back. This reduces the network traffic and results in a quicker response time.