Limit postbacks with ASP.NET client callbacks

Disconnected

Over the years, there have been various solutions that circumvent the stateless limitation of Web applications, with the focus on reducing the number of page calls or reloads to avoid hampering the user experience. For example, many developers used hidden frames to serve as data sources so data could easily be sent to or retrieved from the hidden frame page. Also, some developers chose to load everything with the initial load, so subsequent page loads are reduced.

The problem arises when it is absolutely necessary to make a server call. This is where the AJAX group of technologies enters the picture. AJAX utilizes the XMLHTTP object, along with XML and client side scripting (aka JavaScript) to handle asynchronous server calls.


ASP.NET model

The default behavior of an ASP.NET page begins when the page is requested by a user and loaded in the requesting client. The user interacts with the page via various actions like clicking a button. These actions may trigger a call to the server called a postback (i.e., the page is posted back to the host with a new version of the page reloaded as a result of the action).

Page postbacks come with a price. For example, client state may be lost, and communicating with the server interrupts the user experience as they wait during communication and page reload. AJAX methodologies address these issues by facilitating asynchronous communication with a server while the user experience is not interrupted. A similar approach may be implemented in ASP.NET 2.0 through the use of the ICallbackEventHandler interface.

Implementing a callback


A callback is a function associated with a specific user interface component. The callback performs a certain action in response to a component event. The event can be any one of the many available mouse clicks or any other event.

Implementing callbacks in an ASP.NET 2.0 page has a few differences from standard Web pages. The following list outlines the necessary changes to the page code:

The page must implement the ICallbackEventHandler interface.
The RaiseCallbackEvent method of the ICallbackEventHandler interface must be implemented by the page. This method is invoked to perform the callback on the server.
The page must implement the GetCallbackResult method of the ICallbackEventHandler interface. This method will return the callback result to the client.
With these code changes in place, the callback may be utilized on the client side of the page (HTML source). The Web page must include client-side functions to perform the actual server request along with receiving the results from the server request.

The C# page in the following code listing provides a demonstration of implementing a callback.

<%@ Page Language="C#" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Test

A few notes on the code:

The page’s Page_Load event sets a reference to the callback function (GetData) via the GetCallbackEventReference method available in the page’s ClientScript property. The method accepts these parameters: a reference to the page; the name of the argument by which the data are passed; the name of the client script function that receives the callback data; and an argument that passes any context you want. In this example, the context isn’t used.

The function that will be used to call the server is created (callbackScript variable in the example) with the function reference included. Also, the arguments that are accepted by the generated function must match the names passed to the GetCallbackEventReference method. Finally, the callback script is registered on the page via the RegisterClientScriptBlock method of the Page object’s ClientScript property.

The GetCallbackResult method provides the output (string) returned by the callback. In this example, the current date and time (on the server) is returned.

The client function that receives callbacks is loaded in the header portion of the page (GetData in the example). The function must be named to match the name passed in the call to the GetCallbackEventReference method. The function accepts two string values for the return value and an optional second value for the context value that is passed back from the server.
The button on the page is tied to the callback function. In this example, the HTML span object receives the callback result.

A smooth user experience

Avoiding page reloads simplifies the user experience and can reduce the amount of data sent back and forth between the client and server. You can use the AJAX approach to provide this functionality; you can also use ASP.NET 2.0’s callback support. The applications for these techniques are endless, and anything that improves the user experience is good for business.

I hope you liked this article..if yes please drop some comments