I come across more and more web sites where JavaScript is used to get great user experience on the client-side. There are a couple of JavaScript frameworks written only to add animation effects to static html web pages. My favorite is the Yahoo! UI Library and the great library yui-ext (written by Jack Slocum) that will extend the Yahoo! UI with common form elements like a dialog, a grid or layout panels.

But what happens if you combine JavaScript with UpdatePanel (I will not say AJAX)?

Let's have a look at the web site SmartScoreboard from my last post. If you click there on Tell a friend in the upper right corner a new dialog will appear where can enter your name and the mail address of your best friend. Before you try this move the dialog to the right border of the window. Now, don't enter any data and click on Send. If you have Fiddler open you will see that there is a server roundtrip done with AJAX (about 52,000 bytes) and when the result is downloaded the dialog box will appear at the initial position (on the upper left corner).

The problem here is that the position of the dialog is not available in the viewstate information which can be used on the server-side code to put the dialog box to the correct position. Maybe here it is easier to use an seperate UpdatePanel only for the display in the dialog, not for the whole page.

Another thing that I have noticed is that the emblems of the teams disappear when clicking on Tell a friend and never come back. If you run the same test on the Help page it will be different (i.e. it will display the last error message after you clicked on cancel).

I don't know if you already have heard from ComfortASP. It is an AJAX library that will work transparent for you, think of an huge UpdatePanel for the complete page. ComfortASP only returns the delta between the old viewstate and the changes done, this is very clever. But combining it with JavaScript will not work, for every click you have to do a server request which can be very slow.

My conclusion is: try to use JavaScript where every you can if you want to modify the UI. If you need to save position or collapse status of panels don't generate new html output. For a typical collapsible panel you don't want to render the page or parts of it, you simply want to display or hide a div and save the status value (a couple of bytes, no viewstate parsing, no page, very low CPU usage on web server).

3 Comments

• Sonu Kapoor said Tuesday, November 28, 2006 3:43:07 PM

  Very useful post. I love the YUI as well, I think Yahoo! did some great work on it. I have started it to use in my own projects.

• Simone Busoli said Tuesday, November 28, 2006 11:44:55 PM

  I'm using the YUI too, it's very well written and has many cool features. Agree on the preference given to simple DOM manipulation in place of roundtrips to the server. I think that making asynchronous rtt to the server so easy as they become with UpdatePanels we risk to push people to use them even when they aren't necessary at all.

• Lior D. Shefer said Friday, December 1, 2006 4:25:01 PM

  Thanks for your feedback, as the person who wrote this feature I really appreciate any ideas on how to improve things. I took your advise and implemented the tell a fried panel (which use atlas:DragOverlayExtender) using some basic javascript code in order to show and hide the panel. The updatePanel is still there in order to send the email asynchronous without the "ugly" postback of traditional web sites. Thanks again. Lior D. Shefer