Total votes: 2
Print: Print Article
Please login to rate or to leave a comment.
Published: 13 Feb 2008
Get up to speed with ASP.NET AJAX by building a simple Virtual Earth mashup.
In this series, you will take a leap around the main features offered by ASP.NET AJAX. To make things less boring, you will put ASP.NET AJAX at work by creating a simple mapping mashup. A mashup is an application that relies on external services (web services) in order to retrieve the data it needs. Then, it typically uses AJAX techniques to manipulate and visualize such data. Since web mapping has been one of the preferred fields for mashups - especially in their early days - we will create a simple mapping application that utilizes the Virtual Earth API.
Loading a Virtual Earth map
Once the API is loaded, you create a map by instantiating an object of type
VEMap. The constructor takes a string with the ID of a HTML element - a
div, usually - that will display the map. This is shown in the following listing, which reports the code for an ASP.NET page that hosts a Virtual Earth map. If you browse the page, you'll see that a map is effectively displayed on screen.
Listing 1: Loading a Virtual Earth map in an ASP.NET page
head tag of the HTML in the previous listing contains two
script elements. The first one references the latest version of the Virtual Earth API. The second
loadMap, which is invoked as soon as the
load event of the
body element is fired. You can verify this by looking at the
onload attribute of the
VEMap constructor takes a string with the ID of the div that is going to display the map, and returns a map object that is saved in the global
theMap variable. Before calling the
LoadMap method of the map object, you assign a function to its
onLoadMap property. This function (a callback) is executed as soon as the map is loaded, and it's an ideal place to interact with the Virtual Earth API.
If you want to set a different zoom level, you can do so by calling the
SetZoomLevel method and passing an integer between 1 and 19. Let's say that you want to center the map at a different point: First, you create a
VELatLong object with the latitude and longitude coordinates. Then, you pass this object to the
SetCenter method of the map, like so:
So far, everything works great and you are able to leverage all the functionality provided by the Virtual Earth API in your ASP.NET page.
In fact, this little web application suffers a series of (typical) symptoms that may compromise its overall design and cause problems related to performance and maintainability. Let's see what's wrong with it.
ASP.NET AJAX to the rescue
The code shown in listing 1 works, though it's not the kind of code you would write when leveraging a server-side technology like ASP.NET.
Despite being a dynamic page, it looks fairly static. We find hard-coded URLs, the
The way the client side code is written betrays some bad habits. Attaching event handlers like we are doing with the
onload attribute leads to a mix of markup and code that can be the root cause of multiple problems. For example, how can we detach that event handler? Unfortunately, Internet Explorer 6 and other browsers are known to leak memory when event handlers aren't properly detached before the page is unloaded. This, in turn, can lead to huge performance drops as the application becomes slow and less responsive.
If you agree that we've found enough problems given the small size of the code in listing 1, you have to think to what happens when we start adding pages and writing more markup and client side code. It's very likely that those that could have been called issues now have become nasty bugs. As soon as we fix them, we may be forced to repeat a same, long sequence of modifications on and on. Rest assured that the nature of the Web (that lets you mix data and code) can really make things worse.
What's stated in the previous paragraphs encourages particular care in how mashups - and, in general, dynamic pages - are structured. For this reason, a good approach is using a server side technology combined with a client side library that leverages AJAX techniques. You'll end up rewriting the code in listing 1 into that shown in listing 2.
Listing 2: The code in listing 1 rewritten with ASP.NET AJAX
The code in listing 2 leverages the power of ASP.NET server controls. Furthermore, one of the features of ASP.NET AJAX is the ability to automatically initialize a web page for AJAX. In this series, you'll get up to speed with the main tools that ASP.NET AJAX provides in order to create mashups and rich web applications.
The final step in this introductive article is configuring a new website for ASP.NET AJAX.
Configuring an ASP.NET website for AJAX
If you are targeting the .NET Framework 3.5, everything you have to do is creating a new ASP.NET Website from within Visual Studio 2008.
If you are targeting the .NET Framework 2.0, the procedure is slightly more complex because ASP.NET AJAX lives in a separate assembly. One solution is to use the website template added to Visual Studio 2005 by the ASP.NET AJAX installer. If you want to proceed manually, the first thing to do is editing the Web.config file in order to add all the configuration settings required by ASP.NET AJAX. The quickest way, if you are creating a new website, is to replace the existing file with the Web.config file located in the ASP.NET AJAX installation directory. If you open this file, you'll notice that the
assemblies section references the System.Web.Extensions assembly:
The System.Web.Extensions assembly contains all the ASP.NET AJAX features. It should be installed in the GAC (the Global Assembly Cache, a place in the local filesystem where shared assemblies are stored). This is done automatically by the ASP.NET AJAX installer. If you need further assistance, be sure to check the Reference section at the end of this article.
At this point, we've got a working ASP.NET AJAX website. The first step to enable AJAX in a web page is to declare a ScriptManager control, like so:
The next part of this series will demonstrate this by showing how to create ASP.NET AJAX-enabled server controls.
In this introductive article, we have explained how mashups and rich web applications can benefit from the use of ASP.NET AJAX. We have compared a classical, pure-HTML approach to writing a Virtual Earth mashup against a more server oriented strategy that takes advantage of ASP.NET AJAX. As a first step toward the next part of this series, we have configured a fresh website for use with ASP.NET AJAX.
Alessandro "Garbin" Gallo is a Microsoft MVP in the Visual ASP/ASP.NET category and a .NET developer/consultant. He is a contributor for the Ajax Control Toolkit project, owned by Microsoft. Alessandro won the Grand Prize at the "Mash-it-up with ASP.NET AJAX" contest held by Micr...
This author has published 23 articles on DotNetSlackers. View other articles or the complete profile here.
You might also be interested in the following related blog posts
Telerik Introduces Free Web Testing Framework for ASP.NET AJAX and Silverlight
New ASP.NET 3-8x accelerator is in public beta
My Latest Book – Professional ASP.NET 3.5 AJAX
Session Slides and Samples from Microsoft ASP.NET Connections
AJAX >> Using AJAX to load a usercontrol that has refers to a custom css file
ASP.NET Memory Issues
EOAST - Evolution of a software thingy - Part 1
Building Virtual Earth applications just keeps getting easier
How to setup a new AjaxEngine web project
Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Performing Client Actions in Response to Partial Page Postbacks
Please login to rate or to leave a comment.