EDN: ESRI Developer Network
Interaction with a Web application can be initiated via a synchronous page
postback or an out-of-band postback, known as a client callback, from
the client to the server. The default ASP.NET Web page model uses
synchronous page postbacks, which are usually triggered on the client by
submitting an html form. During a page postback, the Web page and
controls are recreated and a new version of the entire Web page is rendered on
the client. In addition, most of the application logic is present on the
server-side. Unfortunately page postbacks often introduce a
great deal of processing overhead which can decrease performance. Since
the entire page must be reconstructed via a synchronous request to the
server, the client must wait for a response to continue
working.
On the other hand, client callbacks can improve performance
and enhance the end user experience when working with a Web
application. Callbacks utilize a set of technology
standards commonly referred to as AJAX (Asynchronous JavaScript and
XML).
AJAX includes:
Client callbacks can be synchronous or asynchronous. In either case, the
browser creates a new connection to send the callback to a remote server,
thus the callback is out-of-band. The contents of the entire page do
not need to be submitted, so the page lifecycle for a callback skips
events associated with rendering page contents on the
server. In addition, sending an asynchronous callback to a
server permits an end user to continue working in the client
application while the request is processed. When the response
is returned, the appropriate content in the Web page is updated without
refreshing the entire page. The diagrams below illustate the difference
between synchronous and asynchronous communication between a client application
and a server.
Synchronous
Asynchronous
The ASP.NET 2.0 implementation of client callbacks uses the Client
Callback Manager. After initial page load, subsequent requests to
server-side code are made by a client-side component, without refreshing the
entire Web page. The page runs a modified version of its normal life
cycle (see diagram below) where the page is initiated and loaded, but the
page contents are not rendered. Instead, a special method in
the server-side code is invoked, which processes the callback request
content, then returns a value to the browser that can be read by JavaScript
function. The JavaScript function uses technology inherent to the browser
(e.g. DOM, DHTML) to update Web page content dynamically.
The Web page continues to stay live while the request is being
processed.
The diagram below illustrates the difference between the page lifecycle
sequence of events between a synchronous
page postback and a client callback. The Page.IsPostback
property will return true for both request types. The
Page.IsCallback property will return true only when the request is a client
callback.
Developing an ASP.NET 2.0 page that uses client callbacks is a two step
process. First, create the server-side code that will be invoked by the
client. Second, create the client-side code to invoke the callback
request and process the response. Note that the message in the callback
request and response is always a string. The content and format of the
string is up to the developer. The request usually includes a string to
tell the server which action to perform and some user provided data. The
response usually contains content to be rendered on the client or a
set of data to trigger further actions.
Working with Callbacks in an
ASP.NET Web application
The following outline highlights the basic steps used to implement client
callbacks in an ASP.NET 2.0 Web page. In this example, the current time
on the Web server is returned and rendered in the client browser:
public partial class Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
string returnstring;
string ICallbackEventHandler.GetCallbackResult()
{
return returnstring;
}
void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
if (eventArgument == "getservertime")
{
returnstring = DateTime.Now.ToString();
}
}
Usage: GetCallbackEventReference(control, argument, clientCallback, context, clientErrorCallback, useAsync);
| control | The control or the page which implements ICallbackEventHandler. |
| argument | Name of a client-side JavaScript variable. References the string sent to the RaiseCallbackEvent method via the eventArgument parameter. |
| clientCallback | Name of the client-side JavaScript function which will receive the result of a successful server event. |
| context | Name of a client-side JavaScript variable. Usually used to determine the content of the message (argument) in the callback request. The value of the variable will be stored on the client as the context parameter associated with a callback. |
| clientErrorCallback | Name of the client-side JavaScript function which will receive the callback result when an error occurs. |
| useAsync | Boolean to determine whether a synchronous or asynchronous call is made to the server. |
public string sCallBackFunctionInvocation;
protected void Page_Load(object sender, EventArgs e)
{
sCallBackFunctionInvocation = Page.ClientScript.GetCallbackEventReference(this,
"message", "processMyResult", "context", "processMyError", true);
}
<script src="/WebAppName/WebResource.axd?d=TqQApA1CcEIyShhLjzTczw2&t=632657807109074470" type="text/javascript"> </script>
<html>
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function getServerTime()
{
var message = 'getservertime';
var context = 'Page1';
<%=sCallBackFunctionInvocation%>
}
function processMyResult(returnmessage, context){
var timediv = document.getElementById('timelabel');
timediv.innerHTML = returnmessage;
}
function postMyError(returnmessage, context){
alert("Callback Error: " + returnmessage + ", " + context);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="Get Server Time" onclick="getServerTime();" />
<div id="timelabel"></div>
</form>
</body>
</html>
