The art of solving performance problems

Enterprise Application Performance

Subscribe to Enterprise Application Performance: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get Enterprise Application Performance: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Application Performance Authors: Suresh Sambandam, Kevin Benedict, Elizabeth White, Jason Bloomberg, APM Blog

Related Topics: RIA Developer's Journal, Enterprise Application Performance, Facebook on Ulitzer

Facebook: Article

First Time with AJAX.NET

Exploring this new technology

In a former life, I was a web developer. Back in the late '90s, I vividly remember being told by more than one of my computer science professors that in 10 years, everything would run in a web browser. Even the operating system (it was claimed at the time) would be browser based. On startup, the machine would load the thinnest of all possible operating systems, and everything else - applications, data, you name it - would be stored on the network and accessed via a hyper-dynamic web browser.

At the risk of stating the obvious...this hasn't happened. Part of the reason for this, I'm sure, is that the explosion of bandwidth that seemed so likely at the end of the last century simply hasn't panned out. Coming from the opposite direction, the cost of hardware - both up-front purchase costs and ongoing maintenance - have fallen enough that there is really not much advantage to be gained any longer from "thinning down" entire machines.

In my own case, I have to confess that I've never really been very enthusiastic about the vision anyhow. Network computers seem an awful lot like glorified "dumb terminals" from the late '70s - so I have a hard time envisioning them as a step forward. And, of course, the whole idea of storing all my data and applications out on the network gives me all sorts of concerns about privacy and no longer being able to purchase software outright but, instead, being forced into paying a small fee for every access. Some of us will always prefer to buy than to rent, that is all there is to it.

Of course, much has been made of the "Web 2.0" phenomenon, and in many ways this represents the (to my mind) right-sized approach to the idea of network-enabling content and data. There are two main aspects to Web 2.0. One of these aspects is the leveraging of the Internet to make data access and applications more inherently communal and multi-user interactive. Examples of this would be social networking sites like Facebook or MyPage or even the business-networking site LinkedIn.

What is more relevant to us, however, is the other aspect of Web 2.0 - making web content that is so incredibly interactive and responsive that it seems in many ways like a traditional desktop application. My favorite example of this would be Google Maps. When you pull up a Google map, you are able to flip through multiple views (satellite, traffic, traditional, etc.) and re-center the map on just about any point - hardly ever being aware of the numerous network requests that are feeding your requests as you go along.

If you contrast this with the way that a similar browser-based application might have been constructed just five years ago, you might recall that the experience would almost certainly have been much worse. In those days, any request to change the data displayed would have resulted in the all-too-familiar "wait, blank, new page" cycle. Even though the "blip" might only have lasted a second on sufficiently fast machines and connections, the disconnect in thought process was sufficient that web applications developed this way would never really stand any chance of displacing traditional applications for most uses. Solving this is where AJAX.NET enters the picture.

AJAX.NET - What Is It?
AJAX stands for "Asynchronous JavaScript and XML" and was, of course, in no way, shape or form a Microsoft invention. It could be debated, really, as to whether any one person or group could ever truly claim credit for its invention. I personally remember having created a web page that used DHTML, JavaScript, and the Internet Explorer HTTP request object way back in 2000 to allow users to update a server-based database from a form without having the form do a full-submission and resulting "wait, blank, new page" routine.

What makes AJAX fundamentally different from previous uses of JavaScript and XML is that the usage pattern for these technologies in AJAX is more codified, standardized, and (in many cases) exposed by software component bundles that obviate the need for developers to understand the underlying technologies of JavaScript, XML, or even DHTML. One such technology is Microsoft's fantastic AJAX.NET.

Using AJAX.NET, you can get away from the standard "wait, blank, new page" model of web pages that has existed for over a decade at this point. Instead, components added to an AJAX.NET web page are allowed to create their own connections back to the server to receive updated information and then re-present themselves individually as circumstances require - with no need to reload the page in its entirety.

Quick Example of AJAX.NET
To get your first glimpse of the power of AJAX.NET, we're going to construct a simple timer web page. The idea is that this page will show the current time, updating every second. First, we'll build this using traditional "wait, blank, new page" technology, then we'll update it to use AJAX.NET and see how much better it looks.

Start by loading up Visual Studio .NET 2008. If you choose "File, New Project," and limit the choices to "Web," you will see a number of AJAX.NET-related entries:

  • ASP.NET AJAX Server Control
  • ASP.NET AJAX Server Control Extender

We will discuss both of these shortly, but for right now you can just choose to create a standard ASP.NET Web Application.

When the HTML source code for the page appears, change to the Design view. Drag a label from the toolbox to the design surface, and then a button. Double-click the button on the design surface to go into code view. You should be focused on the Button1_Click event. Inside this method, enter the following code:

Label1.Text = "" + DateTime.Now;

Now, if you run the application, you will find that every time you hit the button, the entire page reloads and the current time is shown. This would seem to be the "Hello World" counter-example for AJAX - you're getting the data you want, but in order to get it, you have to take explicit action, and it results not just in updating the desired location - meaning, the label - but, instead reloading the entire page.

Now, let's look at an AJAX.NET-enabled version of the same page. Return to Design Mode for the page and scroll the toolbox down to the "AJAX Extensions" part of the UI. When you expand this, you will see several options:

  • ScriptManager
  • ScriptManagerProxy
  • Timer
  • UpdatePanel
  • UpdateProgress

Each of these components serves an important purpose, but arguably the most important of them all is the ScriptManager. You aren't going to be able to take two steps into AJAX.NET without adding a ScriptManager to your page. This component serves as the "brain" for all the AJAX stuff you are going to do on a given page, so drag-and-drop that component onto your page right now, please.

The next thing we need is an UpdatePanel. In short, things that are in UpdatePanels can be updated asynchronously (the "A" in AJAX) and those that are not, cannot. So, drag an UpdatePanel onto your page's design. And then, drag your existing label into the UpdatePanel - because this is what we are going to want to update asynchronously.

The final component we will add to the page - specifically, to the UpdatePanel - is the Timer control. Drag and drop that now. The Timer is going to allow us to request that the content of this UpdatePanel update themselves every X number of milliseconds, so we don't have to force our user to keep hitting the button over and over again.

Like the Windows and Threading Timer controls, this control has properties for Enabled and Interval. If Enabled is set to True, the code behind the timer will fire every X millisecond. You specify the value for X using the Interval property. Since Enabled should default to True, take a moment now - using the Properties window in Visual Studio, to set the Interval to 1000. This will make the code behind our timer run once-per-second, since there are 1000 milliseconds in a second. When you have done this, your solution should look like the Figure 1.

This leads us directly to our next, and final, bit of software development - which is to add code behind the timer. Double-click the Timer1 control, when you get the code-view to pop-up, copy the code from your button to the inside of the new Timer1_Tick method, as shown below.

protected void Timer1_Tick(object sender, EventArgs e)
Label1.Text = "" + DateTime.Now;

After adding this code, re-run the application, you will now see that the time on the page updates every second without your having to click the button. If you set a break-point in the Timer1_Tick method, you will see that this is also happening by way of a call back to the server. The important difference is that it is not the entire page that is being re-flowed by way of new HTML being sent down to the client. Instead, specific XML-based content is being sent down to the HTTP request running on a background thread and the DHTML model of the page itself is being access to update the relevant content, which in this case means the label showing the time.

Besides the AJAX controls that ship out-of-the-box with Visual Studio 2008, there are a wide variety of similar controls available on the Internet, and these have additional features and capacities. After this brief introduction to the AJAX.NET technology, it is my hope you will be encouraged to explore further and figure out ways to use this exciting new technology in your own applications.

More Stories By Andrew Montgomery

Andrew Montgomery is a freelance technical writer based in the Chicago area.

Comments (1)

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.