Welcome!

Microsoft Cloud Authors: Pat Romanski, Liz McMillan, Lori MacVittie, Elizabeth White, Yeshim Deniz

Related Topics: Machine Learning , Microsoft Cloud

Machine Learning : Article

Google Maps! AJAX-Style Web Development Using ASP.NET

Taking asynchronous Web forms to the next level

As you can see from the above code sample, it is quite simple to use the XMLHttp object in a stand-alone manner. However, integrating the XMLHttp into the rest of the HttpPage life cycle is difficult - for example, how does one ensure that the server-side method being called has access to the state of other controls on the page? For the state of the controls to be correctly initialized, the callback handling on the server needs to go through a similar HttpPage life cycle as the postback. The other challenge in using the XMLHttp object directly is that as developers we need to account for different browser types. Fortunately, ASP.NET 2.0 provides a reusable pattern that makes the callback functionality easily accessible. Note that several controls that ship with ASP.NET 2.0, including GridView, TreeView, etc., leverage the callback capability.

Figure 1 depicts how the callbacks are implemented in ASP.NET 2.0. Let us start from the server side. A new interface, ICallBackEventHandler, has been defined. Any ASPX page (or a control that intends to support client callbacks) needs to implement the ICallBackEventHandler interface. ICallBackEventHandler defines one method called RaiseCallbackEvent. This method takes one parameter of type string as the argument and returns a string.

On the client side, to initiate the callback, a special Javascript function needs to be invoked. You can obtain a reference to this special Javascript function by calling ClientScriptManager.GetCallbackEventReference (see the second and third entries in the References section). The call to GetCallbackEventReference results in a reference to callback. When invoking the callback, you pass one parameter of type string. This is consistent with server-side RaiseCallbackEvent signature. That is all you need to set up callbacks from the client. The rest of the magic to hook up the client callback to the server-side RaiseCallbackEvent method of ICallBackEventHandler is done by the framework. The aforementioned special Javascript function for initiating callback uses two additional parameters to be included as part of the postback data - __CALLBACKPARAM and __CALLBACKID, which represent the string parameter to pass to the call and the ID of the control, respectively. On the server, ASP.NET detects the presence of the two additional parameters and routes the request to the appropriate control, resulting in the invocation of the RaiseCallbackEvent method on the target control. To solve the aforementioned problem related to initialization of controls on the page, ASP.NET runtime follows a trimmed-down version of HttpPage life cycle when servicing a callback. This includes going through the specific stages of page initialization, view state loading, page loading, and callback event handling. Once the callback event is handled by the control, the rest of the HttpPage life cycle stages are skipped.

To help better understand the ASP.NET 2.0 callbacks, included is a simple progress bar control that relies on callbacks to determine the status of a given task on the server. Listing 1 displays the code for the ProgressBar control. To support client callbacks, this control implements the ICallbackEventHandler interface. For the purpose of the demo, the RaiseCallbackEvent method implementation simply looks up a counter stored in the session, increments the counter by one, and returns the new value to the client. Finally, Listing 2 is the Javascript code that is responsible for initiating the callback. It uses this.Page.ClientScript.GetCallbackEventReference to obtain a safe reference to the function needed to initiate the callback.

Using client callbacks provided in ASP.NET 2.0, it is relatively straightforward to implement the progress bar control, since the data passing between the control and the client is a simple string. However, as soon as we start adding other datatypes to the mix, we will run into mismatches between Javascript and .NET-type systems. Unfortunately, the callback implementation in ASP.NET 2.0 does not help with this issue. Applications that want to use multiple datatypes, simple and complex, will need to implement a custom scheme on their own.

Fortunately, this limitation can be overcome by using an open source library called AJAX.NET (see the fourth entry in the References section), AJAX.NET implements a proxy-based approach for calling the server-side functions. AJAX.Net defines a custom attribute called AJAXMethod. When a server-side method is decorated with the AJAXMethod, a Javascript-based client proxy is automatically generated by the HttpHandler that is part of AJAX.NET library. Unlike ASP.NET 2.0, which supports a single parameter of type string for callbacks, AJAX.Net supports integers, strings, double, DateTime, DataSets, etc.

An alternative to AJAX.NET for dealing with differences between the Javascript and .NET-type system is suggested by Bertrand Le Roy (see the fifth entry in the References section). He has created a server-side control called EcmaScriptObject that recreates the Javascript type system in .NET. The idea is to reproduce a client-side object graph in .NET. This approach makes better sense as the conversion is happening on the server.

Even if we have a type-safe way to invoke callbacks, more challenges remain. Javascript is the glue that holds all the pieces of the AJAX application together. Thus, there is increased reliance on Javascript. Unfortunately, even though Javascript is a powerful and versatile language, it does not lend itself easily to well-known object- oriented principles. This means it is harder to achieve code reuse. Please refer to the sixth entry in the References section for syntactic sugar added around Javascript to make it appear as traditional OO language. Even then, it is hard to implement features available in managed languages such as events and delegates.

The other difficulty, as discussed earlier, is the lack of a reusable framework to make the Javascript development more productive. For example, wouldn't it be nice to have access to a Javascript-based UI framework that hides the differences between different execution environments? Another example would be a set of classes that make it easy to invoke Web services in a secure manner (as opposed to hand coding the SOAP packets and using XMLHttp to transport them).

More Stories By Vishwas Lele

Vishwas Lele is a principal architect at Applied Information Sciences (www.appliedis.com), a system and software engineering company specializing in .NET-based solutions. Vishwas also serves as the MSDN Regional Director for the Washington, DC area.

Comments (17) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Shabdar 03/25/08 11:57:26 AM EDT

If you are looking for Google Maps control for ASP.Net visit following link,

http://www.shabdar.org

This is a free open source control.

Steve 06/02/06 11:11:07 AM EDT

The title of the article is misleading. I see no mention of Google Maps in the content of the article in regards to ASP.NET.

I applaud the editors for coming up with such innovatively misleading bait to entice them to read the entire article, and all the embedded ads. Bravo!

AJAX News Desk 06/01/06 11:59:33 AM EDT

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

SYS-CON India News Desk 05/31/06 12:50:59 PM EDT

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

SYS-CON Italy News Desk 05/31/06 12:20:35 PM EDT

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

AJAX News Desk 05/31/06 11:49:13 AM EDT

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

not amused 02/23/06 03:57:06 AM EST

unreadable text thanks to floating add that is impossible to close

Sanjay Gupta 02/21/06 04:41:58 PM EST

Great explaination of the article.
I appreciate it!

Sanjay

SYS-CON Italy News Desk 02/19/06 05:53:45 PM EST

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

news 12/23/05 04:31:18 PM EST

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

SYS-CON UK News Desk 12/23/05 02:32:15 PM EST

Google Maps! Ajax-Style Web Development Using ASP.NET
In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

AJAX News Desk 12/23/05 11:41:04 AM EST

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

AJAX News Desk 12/23/05 10:42:12 AM EST

In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

Mike 11/14/05 02:21:56 PM EST

I am interested in Geo fencing...would any of the above technologies enable the development of a Google map which has geo fencing capabilities?

Thanks for any input,

Mike

News Desk 10/20/05 11:17:56 PM EDT

Google Maps! AJAX-Style Web Development Using ASP.NET. In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

.NET News Desk 09/08/05 12:58:07 PM EDT

AJAX-Style Web Development Using ASP.NET
In the past few months, the design pattern of combining Asynchronous JavaScript and XML (AJAX) to develop highly interactive Web applications has been growing in popularity. High-profile Web applications such as Google Maps and A9 are currently leveraging the combination of these technologies to produce rich client-side user experiences. The individual technologies that compose AJAX are not recent developments; they have been around for some time and have been continuously updated and improved. However, it is the recent confluence of these technologies that is leading to interesting possibilities.

Mark Petersen 09/07/05 10:22:23 AM EDT

The AJAX.NET URL is not correct.

I believe what you are looking for is:
http://ajax.schwarz-interactive.de/csharpsample/default.aspx

This library works in ASP.NET 1.1 as well.

IoT & Smart Cities Stories
The hierarchical architecture that distributes "compute" within the network specially at the edge can enable new services by harnessing emerging technologies. But Edge-Compute comes at increased cost that needs to be managed and potentially augmented by creative architecture solutions as there will always a catching-up with the capacity demands. Processing power in smartphones has enhanced YoY and there is increasingly spare compute capacity that can be potentially pooled. Uber has successfully ...
The deluge of IoT sensor data collected from connected devices and the powerful AI required to make that data actionable are giving rise to a hybrid ecosystem in which cloud, on-prem and edge processes become interweaved. Attendees will learn how emerging composable infrastructure solutions deliver the adaptive architecture needed to manage this new data reality. Machine learning algorithms can better anticipate data storms and automate resources to support surges, including fully scalable GPU-c...
To Really Work for Enterprises, MultiCloud Adoption Requires Far Better and Inclusive Cloud Monitoring and Cost Management … But How? Overwhelmingly, even as enterprises have adopted cloud computing and are expanding to multi-cloud computing, IT leaders remain concerned about how to monitor, manage and control costs across hybrid and multi-cloud deployments. It’s clear that traditional IT monitoring and management approaches, designed after all for on-premises data centers, are falling short in ...
Predicting the future has never been more challenging - not because of the lack of data but because of the flood of ungoverned and risk laden information. Microsoft states that 2.5 exabytes of data are created every day. Expectations and reliance on data are being pushed to the limits, as demands around hybrid options continue to grow.
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
If a machine can invent, does this mean the end of the patent system as we know it? The patent system, both in the US and Europe, allows companies to protect their inventions and helps foster innovation. However, Artificial Intelligence (AI) could be set to disrupt the patent system as we know it. This talk will examine how AI may change the patent landscape in the years to come. Furthermore, ways in which companies can best protect their AI related inventions will be examined from both a US and...
Charles Araujo is an industry analyst, internationally recognized authority on the Digital Enterprise and author of The Quantum Age of IT: Why Everything You Know About IT is About to Change. As Principal Analyst with Intellyx, he writes, speaks and advises organizations on how to navigate through this time of disruption. He is also the founder of The Institute for Digital Transformation and a sought after keynote speaker. He has been a regular contributor to both InformationWeek and CIO Insight...
DXWorldEXPO LLC, the producer of the world's most influential technology conferences and trade shows has announced the 22nd International CloudEXPO | DXWorldEXPO "Early Bird Registration" is now open. Register for Full Conference "Gold Pass" ▸ Here (Expo Hall ▸ Here)
Bill Schmarzo, Tech Chair of "Big Data | Analytics" of upcoming CloudEXPO | DXWorldEXPO New York (November 12-13, 2018, New York City) today announced the outline and schedule of the track. "The track has been designed in experience/degree order," said Schmarzo. "So, that folks who attend the entire track can leave the conference with some of the skills necessary to get their work done when they get back to their offices. It actually ties back to some work that I'm doing at the University of ...