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 [1] and the great library yui-ext [2] (written by Jack Slocum [3]) that will extend the Yahoo! UI with common form elements like a dialog [4], 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 [5] from my last post [6]. 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 [7] 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 [8]. 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).