Summarizing AJAX Patterns Under ASP.NET
page 4 of 8
by Xianzhong Zhu
Feedback
Average Rating: 
Views (Total / Last 10 Days): 45612/ 129

The ASP.NET 2.0/3.5 Callback Function Pattern

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


View Entire Article

User Comments

Title: mp   
Name: moosa
Date: 2008-11-12 8:26:44 AM
Comment:
thanks
Title: About Post   
Name: Gopi
Date: 2008-10-15 7:56:44 AM
Comment:
Useful post..
Title: Very interesting   
Name: Raul Macias
Date: 2008-10-14 2:35:33 PM
Comment:
Thanks for sharing this; very helpful indeed.
Title: About Post   
Name: Rem
Date: 2008-10-13 2:15:28 PM
Comment:
Nice post...






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2018 ASPAlliance.com  |  Page Processed at 2018-06-18 1:29:14 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search