Introduction
Many people said that it is a pity ASP.NET 2.0 went to the market
a minute earlier than Microsoft ASP.NET AJAX 1.0 framework. However, from my
point of view, this standpoint is half right, because ASP.NET 2.0 has also built
in the support for Ajax, i.e. Callback, whose functionalities, to be honest, are
not powerful enough, and whose utilization is not easy to follow.
Anyhow, the Callback function pattern is representative of
Microsoft's earliest Ajax policy, with the target of enabling users to use it
as its popular PostBack so as to asynchronously update part of a web page. However,
with further digging into it, many developers have found out that it is rather
difficult to extend the Callback function, which naturally results in the limitation
of usage.
As is well known, to put Callback into usage, a Page has to
implement interface ICallbackEventHandler which
provides two methods, i.e. GetCallbackEventReference
and RaiseCallbackEvent. The former is used to get the
name of a client-side function that will be called to initiate a callback. Since
the GetCallbackEventReference method is declared in the
ICallbackEventHandler namespace, your server-side Page
must explicitly implement this interface; and accordingly, your client-side
JavaScript has to explicitly call the ClientScript.GetCallbackEventReference()
method. The latter performs the task of processing and returning the callback. For
a clearer explanation of the ASP.NET 2.0 Callback mechanism, you can refer to my
previous article published at ASPAlliance.
In the next section, we are to create a simple sample to learn
ASP.NET 2.0's script Callback support, through which we are to investigate how
the Ajax styled partially update is accomplished.
The Callback Styled Sample
Note that this sample corresponds to an individual website
named CallbackForm.
Next, let us first take a look at the server side coding (in
fact implemented in the associated CodeFile .aspx.cs). As is emphasized above,
to trigger the Ajax functionality, we have to explicitly derive the Page from
interface ICallbackEventHandler, as is indicated below.
Listing 7
public partial class _Default : System.Web.UI.Page ,ICallbackEventHandler
{
//define a global string to be used by the callback
string str = "";
//define the method invoked when callbacking the server
public void RaiseCallbackEvent(String eventArgument)
{
str += Request.UserHostAddress;
str += "<br/>The Datatime on the Server side:";
str += DateTime.Now.ToLocalTime();
}
// specify the string returned to the CallBack
public string GetCallbackResult()
{
return str;
}
}As you've seen herein, the main task is undertaken by method
RaiseCallbackEvent. In this case, it only returns a
simple string holding the client-side IP address and the server-side datetime
info. As for another method GetCallbackResult, it
directly posts the string produced in its related method RaiseCallbackEvent
back to the client side. Note in real scenarios, you may populate whatever
complex stuff you want to in method GetCallbackResult.
Next, let us check out the related client side
implementation. With the help of ASP.NET 2.0/3.5 Callback function support, in this sample, file ajax.js (which is used in the previous sample) is no longer
referred to, i.e. without the need to manipulate the XMLHTTP object directly.
However, another two client side functions, CallTheServer
and ReceiveServerData, are present before us, with
which the client side Ajax related programming gets further simplified. The
following gives the key pieces of code concerning the client side programming.
Listing 8
……
function ReceiveServerData(arg,context)
{
document.getElementById("msg_display").innerHTML=arg;
}
function CallTheServer(arg, context) {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>The ASP.NET 2.0/3.5 Callback Function Styled Sample</h1>
<div>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="Submit"
onclick="CallTheServer(document.getElementById('Text1').value)" />
</div>
</form>
</body>As mentioned above, to trigger a call back to the server
side, the client side should first fire a call back invocation. The function CallTheServer here shows a typical usage. In fact, as you may
have found out, the true secrets lies in the function ClientScript.GetCallbackEventReference(…).
Note the ClientScript property of the Page object just
equals the ClientScriptManager class, which is used, by
default, to manage client scripts and add them to Web applications. There are
several versions of method GetCallbackEventReference. For
more researching into this, I recommend you to use .NET Reflector to give
it a thorough examination. Here, we are only interested in the parameters
utilized above.
(1). this: Means the server control
that executes the call back is the current Page. Moreover, the current Page has
to implement interface ICallbackEventHandler. In other
cases, this parameter may point to a Web control (in this case, it must also
implement interface ICallbackEventHandler).
(2). arg: Corresponds the argument eventArgument that is passed to the server side function RaiseCallbackEvent. You can use a custom string for this
parameter.
(3). ReceiveServerData: This is the
name of the client side script function used to process the returned data after
the successful invocation of the call back. Note this function must exist
inside the page that executes the call back. It can contain two arguments, the
first one relates to the returned data of the call back, while the second one
corresponds to the context returned after the call back, which are all strings.
(4). context: This cannot be changed
to be passed to the function processing the returned data.
As for function ReceiveServerData, things
become simple. It used the returned data (the first argument) to populate the
target HTML element.
Purely examined from this simple sample, you may not find out
the simplifications, while in real complex cases it does.
Finally, let us take a look at the running time snapshot, as
shown in Figure 7.
Figure 7 - When the user enters something and clicks
"Submit," the below div element will be populated with data returned
from the server side
