AJAX, file downloads, and IFRAMEs

AJAX, ASP.NET, UI By Dave Ward on February 23rd, 2007

CSV file download link“Click here to download this report in Excel (CSV) format.”

We’ve probably all implemented this functionality in ASP.NET applications at least several times. Any time you’re dealing with report data, it’s expected that the data be available for download. Unfortunately, AJAX makes this somewhat difficult. Since there is no traditional HTTP response, you have no context with which to send the file to the browser for normal download.

Enter inline frames (IFRAME). Probably one of the most under utilized HTML elements around, dynamically creating an IFRAME allows you to round trip an HTTP request and response without disrupting the AJAX-ness of your async postback. Since any browser that supports XmlHttpRequest supports IFRAMEs, it is as safe to use as AJAX is in the first place. This is a simple example of the technique, using a static list of files in a dropdown, but it could be adapted to more dynamic file creation scenarios easily.

Click here to continue reading this entry »

Control to prevent multiple AJAX submits

AJAX, ASP.NET, UI By Dave Ward on February 12th, 2007

“To avoid duplicate credit card charges, only click the checkout button once!”

I’m always surprised at how many sites display a similar warning message on their final checkout page. Major sites. Between server side detection of multiple submissions and using OnClick to disable the submit button, there is no excuse for crossing your fingers and hoping your users don’t double click a submit button.

AJAX complicates the client side component of this equation. You can’t simply disable a button in the OnClick event, because the button will remain disabled in the case of a failed form validation or other exception. The optimal behavior is for the submit button to only be disabled during the async postback, and be re-enabled when the server side processing is completed. Using the AJAXToolKit, I’ve created a control extender to implement this functionality quickly and easily: Postback Ritalin.

Click here to continue reading this entry »

CSS style as ASP.NET AJAX progress indicator

AJAX, ASP.NET, CSS, UI By Dave Ward on January 16th, 2007

Update Panel with Animation I noticed that a lot of people found my mouse pointer as AJAX progress indicator example by using search terms suggesting they were looking for a more graphical indicator. So, here’s an example of doing something more… Web 2.0.

Like last time, I’ll base it on a standard UpdatePanel demo using a button control to set a time/date label, with an artificial delay:

Click here to continue reading this entry »

Mouse pointer as ASP.NET AJAX progress indicator

AJAX, ASP.NET, CSS, UI By Dave Ward on January 1st, 2007

Update: If you’re looking for something more graphical, also see my example of using a CSS style as AJAX progress indicator.

The ASP.NET AJAX UpdatePanel control provides us a quick and easy way to AJAX enable websites without changing our familiar design patterns. It’s certainly much better than using full postbacks in many situations.

However, it lacks usability. While the user waits on the async postback to occur, they are left without any of the usual indicators. We’ve spent decades training our users to wait when they see an hourglass icon. Why throw all that away for a spinning Web 2.0 progress indicator that means little to an average user?

Luckily, the ASP.NET AJAX framework provides us with tools to correct this shortcoming.

Click here to continue reading this entry »