UpdateControls: UpdateHistory and AnimatedUpdatePanel
from: http://www.nikhilk.net/UpdateControls.aspx
Finally, I've updated the UpdateHistory control, so it works against ASP.NET AJAX 1.0. I've gotten numerous emails asking about when I'll be doing this. Thanks for the interest! The package contains the following controls, which includes the initial release of a couple of new controls.
- UpdateHistory
- This is a non-visual control that allows you to add history entries to the browser's navigation stack selectively for some post-backs, and not for some others. This helps fix the back button to make it work, and allows you to implement Ajax patterns such as "logical navigation" and unique URLs.
- StyledUpdatePanel
- A simple derived UpdatePanel that adds CSS class semantics. A simple addition, but a useful feature, nevertheless, that didn't make the feature cut.
- AnimatedUpdatePanel
- Another derived UpdatePanel that displays new content using a variety of animations or effects: slides, wipes, cross-fades as well as a visual highlight. This allows you to implement the "visual notification" Ajax patterns such as the one second spotlight and one second mutation.
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.
