Why you should not place your whole site in an UpdatePanel

AJAX, ASP.NET, Performance, UI By Dave Ward on April 23rd, 2008

Perhaps due to its ubiquitous presence in web based email services, implementing asynchronous site navigation is frequently a design requirement when building AJAX based sites. Unfortunately, the also ubiquitous UpdatePanel is chosen to accomplish this far too often.

I’d like to take a moment to strongly recommend against doing that.

I’m going to explain what I believe are the three most dangerous drawbacks inherent to UpdatePanel based navigation: Performance degradation, usability concerns, and lack of maintainability.

Click here to continue reading this entry »

Using jQuery to Consume ASP.NET JSON Web Services

AJAX, ASP.NET, JavaScript, Performance, UI By Dave Ward on March 27th, 2008

In response to many of the articles here, I receive feedback asking how to achieve the same results without using ASP.NET AJAX. As much as I’m a fan of ASP.NET AJAX, I must agree that its JavaScript payload can certainly be a drawback in some situations.

My recent deferred content loading post is an excellent example of that. I was using jQuery for presentational effects, and using a ScriptManager to call a web service. Loading the JavaScript for both frameworks was a bit counterproductive, since the whole point was to improve initial load time.

In this post, I intend to correct that.

First, I’ll cover the two requirements necessary when calling an ASMX web service that’s being JSON serialized by the ASP.NET AJAX extensions. Then, I’ll show you how to do this with jQuery. Finally, I’ll update the deferred content loading example accordingly.

Click here to continue reading this entry »

Boost ASP.NET performance with deferred content loading

AJAX, ASP.NET, JavaScript, Performance, UI By Dave Ward on February 5th, 2008

FireBug graph of net requests
When rolled into the page life cycle of an ASP.NET WebForm, that red bar is one of your application’s greatest enemies. No matter how well you optimize the rest of the page, even one slow task can become the sole factor determining a user’s perception of the entire page’s performance.

In this post, I’m going to show you one way to circumvent that problem. By placing ancillary content in user controls and delaying their load until the core page content has been displayed, you can drastically improve perceived performance.

When broken down into digestible chunks, the technique is easy to implement and lends your application a level of polish that your users are sure to appreciate. The four steps required to accomplish this will be: building the user control, statelessly rendering the control as HTML, providing progress indication, and using ASP.NET AJAX to request and inject that HTML.

Click here to continue reading this entry »

ASP.NET AJAX Timer Trouble? Location is key.

AJAX, ASP.NET, JavaScript, Performance By Dave Ward on September 19th, 2007

If you’ve made much use of the ASP.NET AJAX Timer control, you may have noticed that it can behave somewhat unexpectedly. In this post, I’m going to take a closer look at how the Timer works and the most significant factor that influences it: Location.

Where the timer is placed on the page actually varies how it operates. As a Timer’s delay interval approaches the processing time of its resulting PostBack, the difference that the Timer’s location makes becomes very significant.

Click here to continue reading this entry »

Seamless inline text editing with ASP.NET AJAX

AJAX, ASP.NET, JavaScript, Performance, UI By Dave Ward on August 23rd, 2007

Inline text editing animationThis is a technique that I really like. It’s excellently suited to intranet sites and administrative interfaces, where your users are typically familiar enough with the application to know which text they can click to edit. It’s actually very easy to implement, with a small amount of JavaScript.

Click here to continue reading this entry »

Get Yahoo’s HTTP performance analysis tool

AJAX, ASP.NET, Performance By Dave Ward on July 25th, 2007

YSlow, Yahoo’s previously internal-only HTTP profiling tool, has been released to the public. It extends FireBug to analyze a page and provide an optimization checklist.

After experimenting with it for a bit today, I think it will quickly become as integral to my performance tuning as FireBug itself.

Get it here: http://developer.yahoo.com/yslow/

Display data updates in real-time with AJAX

AJAX, ASP.NET, Performance, UI By Dave Ward on July 25th, 2007

Example image of Digg Spy.

I’ve recently noticed the real-time “spy” feature popping up on more and more sites. Though it’s often a huge time waster, I can’t help but love the feature. It’s a great example of AJAX leveraged to do what it does best. It struck me that an ASP.NET AJAX implementation would be an excellent use of page methods for efficiency and __doPostBack() to trigger an UpdatePanel refresh. So, I decided to put together a proof of concept, using the ASP.NET AJAX framework.

To create a fully functional example, several things need to be done:

  • Choose a data source to “spy” on.
  • Build an interface to add rows, for testing.
  • Display that data in a row-based format.
  • Create a method to find the most recent row of data.
  • Use that method to asynchronously monitor row updates.
  • Refresh stale data when additions are detected.

Click here to continue reading this entry »

Why ASP.NET AJAX UpdatePanels are dangerous

AJAX, ASP.NET, Performance By Dave Ward on July 11th, 2007

If you’re like me, it’s hard to resist the lure of tossing a half dozen UpdatePanels on every page and reveling in AJAX goodness. The UpdatePanel makes AJAX trivially easy for anyone to implement, even without knowledge of what’s actually going on behind the scenes.

Unfortunately, that very lack of transparency regarding the mechanics of the client/server exchange makes it all too easy to shoot yourself (or your application) in the foot. Let me give you an example that you’re probably familiar with by now, and thoroughly sick of seeing:

Click here to continue reading this entry »