UpdateControls: UpdateHistory and AnimatedUpdatePanel

Downloads: Binaries, samples and source code | Video on Channel9

I've blogged about using UpdateHistory when I first wrote about adding back button support for the UpdatePanel/partial rendering approach for adding Ajax functionalty. Instead of repeating that information here, I'll scope the rest of this post to the AnimatedUpdatePanel.

Using an AnimatedUpdatePanel is really straight-forward. Simply replace <asp:UpdatePanel> with <nStuff:AnimatedUpdatePanel>. Here's a snippet from the sample accompanying the control, that causes performs a cross-fade between old and new content over 1 second.

<nStuff:AnimatedUpdatePanel runat="server" CssClass="content" AnimationType="CrossFade" Duration="1000" />

Check out the included samples, which demonstrate some other effects as well. One thing to be look for are the styles referred to by the CssClass and HighlightCssClass properties. These classes can be used to customize the look and feel of the content. In particular, the background-color and z-index are significant in terms of how new content, old content and the highlight rectangle interact to produce the final rendering.

Hidden behind this simple usage model, the script works against the client-side page lifecycle, and manipulates the DOM so as to update the page in a more visually pleasing manner. The thing that distinguishes this from other animated UpdatePanel effects you might have seen is that this implementation provides the ability to overlay the new content over the old content; as the new content slides in, wipes in or fades in, the old content slides out, gets wiped out, or faded out.

With this super-simple usage model, it may be tempting to do a global search and replace. That is probably not a good idea. You'll want to think about which updates benefit from animated effects and transitions, and which ones are actually distractions or annoyances. It all depends on the app, and the individual pages.

The control provides a small set of animation options. Personally, I think you really don't need a super rich (and bloated) animation framework, especially considering that you'll want to animate over short durations. A good rule of thumb is find a duration that is good for demo'ing the effect, and then use 1/2 that value for real. Think about the actual user, who isn't looking at your demo, but actually using your site - sitting through slow animations repeatedly is excruciating! The goal of the animation is to provide subtle cues about what is changing; it shouldn't become the focus in and of itself unless that is what the app is all about. Keeping the animation framework relatively minimal creates a constraint that helps facilitate that.

Currently these controls work on IE and Firefox. As always, comments are welcome.

Update 4/13/07: I have posted v1.1 of this control pack, which includes various bug fixes, as well as a new UpdateAction control. See the associated blog post for more details.