Quick Ajax Tip: Provide a better asp:Wizard user experience

In a recent post I outlined an technique that I have been using to center an animated gif over an asp:GridView while it is being refreshed via the asp:UpdatePanel.  I like this approach because it provides the user with 2 visual cues (the control fades in/out and the animated gif displays a progress bar) letting the user know the panel is in the process of being refreshed.  In this sample, I use a similar approach and apply it to the asp:Wizard control.

Download code | View live demo

Here is the outline of the technique:

  1. Wrap the asp:Wizard within an asp:UpdatePanel (requires the Ajax.Net)
  2. Add an HTML div tag to the page containing the animated gif that will be rendered over the asp:Wizard while the panel is refreshing
    1. Set the display style to 'none' so the image is initially hidden
<div id="updateProgressDiv" style="display: none; height: 40px; width: 40px">
    <img src="simple.gif" />
</div>   

3.   Add the ajaxToolkit:UpdatePanelAnimationExtender (requires the Ajax Control Toolkit) control to the page so we can display our animation while the panel is being refreshed

    1. define the OnUpdating and OnUpdated actions as follows.  This will run our custom javascript before and after the panel is updated and handle fading the wizard in and out.
<Animations>
    <OnUpdating>
        <Parallel duration="0">
            <%-- place the update progress div over the wizard control --%>
            <ScriptAction Script="onUpdating();" />  
            <%-- fade-out the wizard --%>
            <FadeOut minimumOpacity=".5" />
         </Parallel>
    </OnUpdating>
    <OnUpdated>
        <Parallel duration="0">
            <%-- fade back in the wizard --%>
            <FadeIn minimumOpacity=".5" />
            <%--find the update progress div and place it over the wizard control--%>
            <ScriptAction Script="onUpdated();" /> 
        </Parallel> 
    </OnUpdated>
</Animations>

4.  Implement the onUpdating and onUpdated JavaScript functions that handle displaying and hiding the animated gif.  onUpdating is responsible for centering the gif over the control and displaying it.  onUpdated is responsible for hiding the gif.

<script type="text/javascript" language="javascript">

function onUpdating(){
    // get the update progress div
    var updateProgressDiv = $get('updateProgressDiv'); 
    // make it visible
    updateProgressDiv.style.display = '';

    //  get the wizard element        
    var wizard = $get('<%= this.wizard.ClientID %>');
    
    // get the bounds of both the wizard and the progress div
    var wizardBounds = Sys.UI.DomElement.getBounds(wizard);
    var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
    
    //    do the math to figure out where to position the element (the center of the gridview)
    var x = wizardBounds.x + Math.round(wizardBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
    var y = wizardBounds.y + Math.round(wizardBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
    
    //    set the progress element to this position
    Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);        
}

function onUpdated() {
    // get the update progress div
    var updateProgressDiv = $get('updateProgressDiv'); 
    // make it invisible
    updateProgressDiv.style.display = 'none';
}

</script>  

Thats it.


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/27

Listed below are links to weblogs that reference Quick Ajax Tip: Provide a better asp:Wizard user experience:

» Quick Ajax Tip: Provide a better asp:Wizard user experience from DotNetKicks.com
You've been kicked (a good thing) - Trackback from DotNetKicks.com [Read More]

Comments


Hello Matthew,
Is there a way to disable the wizard control when the updateprogress is shoowing and not only fade it out?

Thanks

Your example works, but why does it break the BACK button in the browser? Is there a workaround for this?

Posted by: Matt on April 16, 2008 12:00 AM

If you wrap the entire ASP.NET wizard control in an UpdatePanel and you have javascript in the HTML portion of one of your user controls, FireFox claims it can no longer see any of the methods. Works fine in IE.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Matt wrote: If you wrap the entire ASP.NET wizard control in an UpdatePanel and you have javascript in the HTML ...
  • Brad Oyler wrote: Your example works, but why does it break the BACK button in the browser? Is there a workaround for ...
  • Bilal Haidar [MVp,MCT] wrote: Hello Matthew, Is there a way to disable the wizard control when the updateprogress is shoowing and ...