Introduction

ASP.NET server-based web forms use a request-response model. Each request results in a roundtrip a.k.a postback to the server. Each postback causes the requesting page to be refreshed, regardless of the nature or the sender of the request. With web users becoming more and more sophisticated, the request-response-refreshing (or click-n-wait) model becomes less and less desirable and in the case of heavy webpages, the lack of smooth performance simply drives users away.

To remedy this, ASP.NET allows various ways to work with JavaScript. One class of them is the ClientScript class, which interjects JavaScript into a webpage, to perform a host of pure client-side tasks, such as window pop-ups, setting focus etc. This class uses strictly a server-centric model, in which the server controls the operation.

Another option is to use an object called XMLHttpRequest to bridge across server and clent-side script, and to enable client-side script to make direct calls to the server, retrieve server-side data, then partially and selectively refresh the calling page. With this model, ASP.NET enables you to create both server-centric and client-centric applications.

There are two ways from the client-side script to make server calls and achieve partial page rendering. One is using the ASP.NET built-in script callback mechanism, the other is the AJAX technology. In this article, we'll examine the Script Callback techniques in detail, we'll also briefly look at AJAX in general, and the programming models in ASP.NET AJAX.

ASP.NET JavaScript Callbacks

To shield programmers from the intricacies of making use of the XMLHTTP object, ASP.NET introduces a string of operations on the server and client side to accomplish Script Callbacks.

On the server side, the code-behind page class must define a method called GetCallbackEventReference method, it also must implement the ICalbackEventHandler interface. The ICalbackEventHandler interface requires two methods:

1. RaiseCallbackEvent
2. GetCallbackResult

Generally we define the GetCallbackEventReference method in the web form's Page_Load event. It returns the JavaScript command WebForm_DoCallback that is to be executed once the server has finished serving the call. The WebForm_DoCallback in turn is stored in the resources of the system.web assembly and will be retrieved through the WebResource.axd HTTP handler.

On the client side, at least two methods must be defined. The first one is the event handling method, responding to an event such as onclick, onmouseover; the second is used to process the response from the callback, and accordingly update's the necessary part of the page.

To illustrate these rather convoluted procedures, we use an example that provides suggestions based on user's input in a textbox. (Please note, this ASP.NET code is tailored from the original AJAX code written in ASP and JavaScript at http://www.w3schools.com/ajax/ajax_example_suggest.asp.)

Web form:

Server-side Code:

Client Side Code:

Drawbacks of Using Script Callbacks

Using ASP.NET Script callbacks has a few issues:

1. Cross-browser Support

ASP.NET Script callbacks will work with Internet Explorer, Firefox and other Mozilla-compliant browsers. It ensures each compliant browser can call the server and return with server-side response, however not all browsers supports dynamic partial page updates. Even with those that do, it is important that script code strictly follows the W3C DOM (Document Object Model - DOM) standards.

In the above example, to update the text inside the span tag called txtHint, instead of directly calling txtHint.innerHTML or using document.all.txtHint: We use the document.getElementById method to retrieve the element then update its content:

2. Server's Response Delivery Format

With each script's callback, the server responds with a string. This works very well with small amount of data. However, it gets problematic with large complex data types. It defeats the purpose if we have to rely on the client-side script on laborious and intensive data parsing, let alone doing so is error-prone.

3. Problem with multiple callbacks

ASP.NET script callback works fine with a single call generated from a single control. However, it gets messy if multiple controls issue multiple callbacks. Because no matter where and how the call is generated, it all gets to be handled by the RaiseCallbackEvent method on the server side. To differentiate the calls and their senders, there is only one way, which is to bundle all necessary information into a string and pass that to the GetCallbackEventReference method, which in turn will be passed to the RaiseCallbackEvent method. It is also possible to write a custom class to handle multiple callbacks.

For more details, please see Script Callbacks in ASP.NET 2.0 - interesting, but lacking.

AJAX

The bundle of technologies (DHTML, JavaScript, XmlHTTPRequest, CSS) that is now coded as AJAX (Asynchronous JavaScript And XML) has been around for a long time. However, only after the launch of a string of successful Google applications (such as Google Maps, Google Suggest, and Gmail) it gained enormous and lasting popularity.

In its bare bone, AJAX makes direct calls to server using the JavaScript XMLHttpRequest object. The XMLHttpRequest object has a readyState property with 5 possible values, a value of 4 indicates a call to server is complete and the calling party can update part of the page based on the response sent back from the server.

ASP.NET AJAX

The raw infrastructure and logic of AJAX is very simple. However, using AJAX in its raw form to write truly interactive and appealing web pages demands extensive skills in JavaScript and sidestepping the various traps caused by the subtle differences between various browsers. It also entails that programmers reinvent the wheel, repeatedly rewriting the same code to recreate the same behavior for common controls. Therefore, many AJAX frameworks have sprung up to free programmers from toiling around sending request and processing responses at its lowest level. Many frameworks also provide a set of sophisticated tools and protocols. ASP.NET AJAX (formerly known as ATLAS) is such a comprehensive yet still fast evolving framework designed for ASP.NET.

An ASP.NET AJAX application can be both server-centric or client centric. In a server-centric application, partial page updates are administrated by a server control called UpdatePanel. It behaves as a intermediate broker between the requesting and responding party, as shown in the following diagram:

For a regular ASP.NET server page to realize partial page-update, the easiest way is to place one or more parts of web page inside an UpdatePanel. A web page can have multiple UpdatePanel controls, an UpdatePanel can also have nested UpdatePanel controls. It is also allowed to have controls outside of an UpdatePanel defined as triggers to fire a partial update.

While it is possible for the UpdatePanel control to work with client script, the functionalities are rather limited - such as stopping and canceling asynchronous postbacks, custom error-message handling, etc. And you must call a reference to the PageRequestManager class in the Microsoft AJAX library. It is more common to use the AJAX library to create custom client components to enable client behaviors, and then use these components as server controls' extensions. The host of components provided by the ASP.NET AJAX Control Toolkit is such custom client components.

In a client-centric AJAX application, a JavaScript function directly calls a Webservice through a script proxy class. Again a new set of rules must be strictly followed. First for a webservice to be consumed by a client-side script, it must be marked with the ScriptService attribute. In the calling page, a reference to the Webservice must be placed inside a ScriptManager control and specify its path to the Webservice, as in the following code:

It is also possible to for a JavaScript to call a static page method that is marked with the [WebMethod] keyword.

Summary:

To enable the communication between server and client, more importantly, to enable partial page rendering, ASP.NET has two major approaches: one is script callbacks, the other ASP.NET AJAX. While script callbacks represents an earlier primitive approach which leaves much to be desired, ASP.NET AJAX represents a sophisticated framework that includes server and client-side components, a JavaScript library (AJAX library), and a collection of server-side classes and methods (AJAX extensions).

While ASP.NET AJAX has enjoyed a lot of exposure and gained lasting popularity and influence, script callbacks are much less well-known. However, given that script callbacks are extensively used by such ASP.NET controls as the TreeView and GridView, its approach still merits some exploration. Therefore this article showed the details of the usage of script callbacks, examining some of its downsides, and briefly introduces the underlying logic of AJAX, and the programming models of ASP.NET AJAX in particular.

References

About Xun Ding

Web developer, Data Analyst, GIS Programmer This author has published 11 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Microsoft JScript runtime error: Object expected	byrdz eye	9/11/2007 8:37 AM
I am getting this error on the page: Microsoft JScript runtime error: Object expected on the onkeyup event Any help appreciated since I am having the same issue on another page I'm working on. Reply | Permanent link
RE: Microsoft JScript runtime error: Object expected	Xun Ding	9/11/2007 11:14 AM
What browser do you use? Did you use document.getElementById(xx)? Do you mind post your code in more detail? Xun Beautiful Girls Programmatically Speaking ... Reply | Permanent link
txtHint not populated	Vadim Z	4/20/2007 10:46 AM
Article is good, but only one thing - when run the code it was not populate xtHint - please advise. VZ Reply | Permanent link
Thanks, I got past the JScript errors but...	byrdz eye	9/17/2007 8:23 AM
(sorry about how this works - newbie at posting here and thanks for responding) What I have now works in IE and FireFox 1) I changed //spanHint.innerHTML=timeMessage; spanHint.innerHTML=hint; 2) The values in the string array need padded before comparing: //String suggestion = a[i].Substring(0, eventArg.Length).ToUpper(); String suggestion = a[i].PadRight(eventArg.Length, ' ').Substring(0, eventArg.Length).ToUpper(); 3) Finally either init the string hint to a zero-length string or check against null I opted for the null comparison. //if (hint == "") if (hint == null) 4) The complete code that works but is this where the ClientScript is supposed to go??? using System; using System.Web.UI; public partial class Test : Page, ICallbackEventHandler { private String hint; pu Reply | Permanent link
RE: The code - second try	byrdz eye	9/17/2007 8:27 AM
using System; using System.Web.UI; public partial class Test : Page, ICallbackEventHandler { private String hint; public String getHintFromServer; //Define GetCallbackEventReference method //whose signature is as the following: //public string GetCallbackEventReference( //Control target, //string argument, //string clientCallback, //string context, //string clientErrorCallback, //bool useAsync) void Page_Load(object sender, System.EventArgs e) { getHintFromServer = this.ClientS Reply | Permanent link
RE: RE: The code - second try	Xun Ding	9/17/2007 11:18 AM
Yes, call the client code in the Page_Load event, it will initiate the java script callback. This web article also has very good explanation of the script callback process http://dotnetjunkies.com/Article/E80EC96F-1C32-4855-85AE-9E30EECF13D7.dcik. Sorry I neglected to put the reference there before. Please let me know if you have more questions. Xun Beautiful Girls Programmatically Speaking ... Reply | Permanent link
Re: txtHint not populated	Sonu Kapoor	4/20/2007 10:48 AM
Vadim, Do you get any error? [MVP since 2005] [MCAD] Webmaster of DotNetSlackers Question or Suggestion? Feel free to ask my any .NET question Our Posting FAQ Reply | Permanent link
RE:Jscript Error Object Expected	Nirav Vyas	9/10/2008 6:06 AM
Hi I am also geting the same error and confused abt hw to solve.from one blog I came to know that if close the script tag by "/>" instead  of </script> (u cn chk it  http://blogs.techconception.com/manny/2007/08/12/JavascriptErrorObjectExpected.aspx ) then it would work.It is working fine but it produces another jscript error - "this._form" is null or not object. Now solution for that is I should close script tag like</script> (http://forums.asp.net/t/1150229.aspx) Note that I had  to write my script tag in body tag for some other reasons. Please help me out of this. Reply | Permanent link
RE: RE:Jscript Error Object Expected	Sonu Kapoor	9/10/2008 8:32 AM
Could you please post your code in our forums? http://dotnetslackers.com/Community/forums/asp.net-ajax-javascript-general-questions/4.aspx [MVP since 2005] [MCAD] Webmaster of DotNetSlackers Question or Suggestion? Feel free to ask my any .NET question Our Posting FAQ Reply | Permanent link
RE:Jscript Error Object Expected	Nirav Vyas	9/11/2008 12:34 AM
Hi Sonu I had posted my code there please check  it. Tahnks for response. Reply | Permanent link
ie runtime error	Rachel Kirk	3/28/2009 9:30 PM
I've got this code in my master template in order to put the widget in my right column. But it gives a runtime error in ie. I don't get any errors in Firefox. What can I do? <asp:Literal ID="Literal1" runat="server"> <script type="text/javascript"src="http://voap.weather.com/weather/oap/22601?template=LAWNV&par=3000000007&unit=0&key=twciweatherwidget"></script></asp:Literal> Rachel Reply | Permanent link
RE: ie runtime error	Rachel Kirk	3/28/2009 9:30 PM
btw, I don't get the error when the page is run in Firefox. Reply | Permanent link

---

Please login to rate or to leave a comment.