How to display animation on long operations without partial post back

• Download demo - 32.1 KB
• Download source code - 1.62 KB

Introduction

This article will show how to render a 'please wait page' while the web server is performing a lengthy operation.

Background

Animated GIFs are a good way to show users that an application is busy. If you have ever tried to display an animated GIF using client side scripting on a user initiated postback, you will know that the GIF is frozen at the first frame. This happens because IE shuts down the background thread while posting back.

The AJAX partial postback feature resolves the frozen animation issue, but does not work well if the page contains certain controls such as validators.

Using the code

The source code consists of a single class that I have named LongOperation. This class is statically initialized with the URL of a 'long operation page' that will be rendered to the web client while processing the lengthy operation. Three lines of code are needed to animate your lengthy operations as shown in the btnDoOperation_Click event handler below.

namespace ByteTec.OnSubmitAnimation.Demo {
    /// <summary>
    /// Will simulate a long running operation by sleeping for a period of time.
    /// </summary>
    public partial class LongOperationStart : System.Web.UI.Page {
        
        /// <summary>
        /// Initializes the <see cref="LongOperationStart"/> class.
        /// </summary>
        static LongOperationStart() {
            ByteTec.Web.LongOperation.LongOperationPageUrl = 
               ApplicationUrl + "/LongOperationAnimation.aspx";
        }
        /// <summary>
        /// Raises the <see cref="E:System.Web.UI.Control.Load"></see> event.
        /// </summary>
        /// <param name="e">The <see cref="T:System.EventArgs"></see>
        /// object that contains the event data.</param>
        protected override void OnLoad(EventArgs e) {
            base.OnLoad(e);
            btnDoOperation.Click += new EventHandler(btnDoOperation_Click);
        }
        /// <summary>
        /// Handles the Click event of the btnDoOperation control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.EventArgs"/>
        /// instance containing the event data.</param>
        void btnDoOperation_Click(object sender, EventArgs e) {
            ByteTec.Web.LongOperation _longOperation = 
                    new ByteTec.Web.LongOperation(this);
            _longOperation.Begin();
            System.Threading.Thread.Sleep(5000);
            _longOperation.End("/LongOperationConfirmation.aspx");
        }
        /// <summary>
        /// Gets the application URL.
        /// </summary>
        /// <value>The application URL.</value>
        private static string ApplicationUrl {
            get {
                if (HttpContext.Current.Request.Url.IsDefaultPort) {
                    return HttpContext.Current.Request.Url.Scheme + "://" + 
                           HttpContext.Current.Request.Url.Host;
                } else {
                    return HttpContext.Current.Request.Url.Scheme + "://" + 
                      HttpContext.Current.Request.Url.Host + ":" + 
                      HttpContext.Current.Request.Url.Port;
                }
            }
        }
    }
}