When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Wednesday, May 7, 2008

Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Providing Visual Feedback with the UpdateProgress Control

By Scott Mitchell


A Multipart Series on ASP.NET AJAX
Over the past several years web developers have started using JavaScript to make asynchronous postbacks to the web server that only transmit and receive the necessary data; these techniques are commonly referred to as AJAX. Microsoft has released a free AJAX framework for ASP.NET developers named Microsoft ASP.NET AJAX. This article series examines using Microsoft's ASP.NET AJAX framework to build responsive user interfaces.

  • AJAX Basics and Getting Started with Microsoft's ASP.NET AJAX Framework - examines AJAX basics and looks at installing Microsoft ASP.NET AJAX; includes a demo of the UpdatePanel control.
  • Using the UpdatePanel - provides more in-depth and real-world examples of using the UpdatePanel.
  • Providing Visual Feedback with the UpdateProgress Control - shows how to use the UpdateProgress control to display visual feedback to the user when a partial page postback is in progress.
  • Performing Client Actions in Response to Partial Page Postbacks - learn how to execute client-side script in response to events raised by the partial page postback life-cycle.
  • Using the Timer Control - see how to asynchronously update a portion of the screen every n milliseconds.
  • Enabling Bookmarking and the Browser's Back Button - learn how to add history points to an AJAX-enabled web page so that your visitors can use their browsers' Back and Forward buttons and bookmarks.
  • Retrieving Server-Side Data Using Web Services - call Web Services from an ASP.NET AJAX application with a sprinkle of JavaScript.
  • A Look at JSON Serialization - explore the serialization format used by the ASP.NET AJAX Framework when calling Web Services from client-side script.
  • Triggering Full Page Postbacks From An UpdatePanel - learn how to override an UpdatePanel's default behavior and trigger a full page postback.
  • Refreshing An UpdatePanel With JavaScript - see how to refresh the contents of an UpdatePanel via JavaScript.
  • Rebinding Client-Side Events After a Partial Page Postback - discover how to automatically rebind client-side event handlers to HTML elements in an UpdatePanel after a partial page postback.
  • (Subscribe to this Article Series! )

    Introduction


    Microsoft's ASP.NET AJAX Framework helps page developers design more interactive web pages by streamlining the postback mechanism. In traditional web pages, a full postback involves the browser re-requesting the page, which is then re-rendered. This re-rendered page markup is returned, in its entirety, to the browser for display. Ajax techniques improve the user's experience in two primary ways through the use of partial postbacks: first, a partial postback is asynchronous, meaning that the user can still interact with the page while waiting for the partial postback to complete; second, and more importantly, because a partial page postback updates only a particular region (or regions) of a page, less data needs to be shuttled between the client and the server, resulting in a quicker and smoother experience.

    One benefit of full page postbacks is that the browser provides a number of cues to the user that a postback is underway. Upon the initiation of a postback, the little Internet icon in the browser's upper right corner starts spinning and a progress indicator is shown in the status bar, among other signs. With a partial page postback, however, no feedback is provided to the user. Consequently, a user may have instigated a partial page postback, but not realize it if the response is lagging. This may prompt them to click the button (or whatever instigated the partial postback) again, or they may just decry your website as buggy and close their browser, never to return again!

    The good news is that the ASP.NET AJAX Framework includes the UpdateProgress control, a Web control designed specifically for providing visual feedback to a user during a long-running partial page postback. This article examines using the UpdateProgress. Read on to learn more!

    - continued -

    Providing Visual Feedback During a Partial Page Postback


    Because the browser does not innately provide visual feedback to the user when a partial page postback is occurring, it is our responsibility to embed such functionality in our web page. If you visit Ajax-enabled web applications you've likely seen this sort of feedback in action. For example, GMail (Google's online e-mail service) displays the text "LOADING" in the upper right corner of the web page whenever a user pages to the next page of email, filters the displayed email by a label, or instigates some other partial postback action. Other sites alert the user that a partial page postback is in effect through an animated GIF image, such as a spinning indicator.

    Adding such visual feedback in response to a partial page postback is easy with the ASP.NET AJAX Framework. In short, all we have to do is:

    1. Add an UpdateProgress control to the web page
    2. Set its AssociatedUpdatePanelID property to the ID of the UpdatePanel on the page that you want to display visual feedback for when it triggers a partial page postback. (See the Using the UpdatePanel installment in this article series for more information on using the UpdatePanel control.)
    3. Define the markup to emit during the partial page postback in the UpdateProgress control's ProgressTemplate. (If you are adding content through the Designer, you can directly type text in the UpdateProgress control, as well as drag and drop Web controls from the Toolbox.)
    That's all there is to it!

    Adding and Configuring an UpdateProgress Control


    At the end of this article you will find a download that includes all of the demos covered in this article. I invite you to download this Visual Studio 2005 project and follow along at your computer. The first demo is SimplePartialPostback.aspx, which is a very simple Ajax-enabled web page. Specifically, the page has a single UpdatePanel control. Inside the UpdatePanel you'll find a Label and a Button. Likewise, there is a Label and a Button outside of the UpdatePanel.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
       <ContentTemplate>
          <asp:Label runat="server" id="PanelTime"></asp:Label>
          <br />
          <asp:Button runat="server" ID="PanelButton" Text="Partial Postback" />
       </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
       <ProgressTemplate>
          <span style="font-weight:bold; color:Red;">LOADING</span>
       </ProgressTemplate>
    </asp:UpdateProgress>

    <asp:Label runat="server" id="PageTime"></asp:Label>
    <br />
    <asp:Button runat="server" ID="FullPostbackButton" Text="Full Postback" />

    When the Button inside the UpdatePanel is clicked, a partial page postback ensues. When the Button on the page is clicked, a full postback occurs. The page Label (PageTime) has its Text property set to the current date and time in the Page_Load event handler; the Label inside the UpdatePanel (PanelTime) is set to the current date and time in the UpdatePanel's Load event handler. Consequently, both Labels display the current date and time whenever the page is first loaded or whenever a full postback occurs; however, only the PanelTime Label is updated when a partial page postback occurs.

    Now, imagine that we wanted to provide the user with visual feedback whenever a partial page postback occurs. The first step is to add an UpdateProgress control to the page. Drag an UpdateProgress control from the Toolbox onto the page, beneath the UpdatePanel control. Set the UpdateProgress control's AssociatedUpdatePanelID property to the ID of the UpdatePanel control (UpdatePanel1). Next, add the content to display during the partial page postback. You can enter this directly through the browser. If you manually enter the markup through the Source view, make sure to place it within a ProgressTemplate. I've decided to use the text "LOADING" dispayed in a bold, red font. The UpdateProgress control's resulting declarative markup follows:

    <asp:UpdateProgress ID="UpdateProgress1" runat="server"
                   AssociatedUpdatePanelID="UpdatePanel1">
       <ProgressTemplate>
          <span style="font-weight:bold; color:Red;">LOADING</span>
       </ProgressTemplate>
    </asp:UpdateProgress>

    Visit the page and click the "Partial Postback" button. What happens? A partial postback occurs (as evidenced by the updated time shown in PanelTime), but the LOADING message was not displayed. The problem is that our partial postback occurred too quickly. The UpdateProgress control does not display unless there is a certain latency between the start of the partial page postback and the time the response is returned. By default, this is half a second, although this property can be configured via the UpdateProgress control's DisplayAfter property.

    To see the effects of the UpdateProgress we need to introduce an artificial delay in processing the partial page postback. Of course, we would never want to add an artificial delay in a real-world application, but this delay is often needed in testing because it can be hard to simulate a delay when working locally. To force a delay in processing the partial page postback, create an event handler for the "Partial Postback" Button control's Click event and add the following code:

    protected void PanelButton_Click(object sender, EventArgs e)
    {
       // Add artificial delay time of five seconds...
       System.Threading.Thread.Sleep(5000);
    }

    This adds a five second delay. You can adjust the parameter passed to the Sleep method to increase or decrease this delay.

    With the above code in place, clicking the "Partial Postback" button now displays the LOADING message, which remains until the response is received from the web server.

    The LOADING message is displayed during a partial page postback.

    A More "Real-World" Example of Using the UpdateProgress Control


    The download includes a more interesting "real-world" demo that uses Ajax techniques to display a master/detail report. The page consists of two UpdatePanel controls: one lists the categories from the Northwind database while the other lists the products that belong to the category selected from the first list. (We discussed using multiple UpdatePanel controls on a page in the Using the UpdatePanel installment.) There's also an UpdateProgress control on the page that uses an animated GIF in the loading message. (You can create your own customized animated Ajax loading GIFs for free over at www.AjaxLoad.info.)

    The demo uses cascading stylesheets to display the loading message as a <div> that stretches over the entire area of the page. It also employes a CSS filter to display the loading message with a semi-translucent background. (Caveat: I know just enough CSS to be dangerous; please don't think my CSS styling is an example of best practices.) The following screenshots show the page in action. The first screenshot shows the page after the Beverages category has been selected. The corresponding products are showin in the pane on the right. The second screenshot shows the page after a new category has been selected. While the products for that category are being retrieved, a "LOADING PRODUCTS FOR SELECTED CATEGORY" message is displayed along with an animated loading GIF. Download the code at the end of this article to try this demo out (or modify it) for yourself.

    The products for Beverages are displayed.

    The Condiments category was selected; the UpdateProgress shows a loading message.

    Looking Forward...


    Another ASP.NET AJAX Framework control we've yet to cover is the Timer, which is useful for performing some client-side task on a timed basis (such as updating a portion of the page every ten seconds). We will examine this control in future installment and then move on to the controls in the ASP.NET AJAX Control Toolkit. Until then...

    Happy Programming!

  • By Scott Mitchell


    Further Readings:


  • Managing the User Experience in AJAX
  • Disabling a User Interface Element During a Partial Page Postback
  • Attachments:


  • Download the Demo Code Used in this Article

    A Multipart Series on ASP.NET AJAX
    Over the past several years web developers have started using JavaScript to make asynchronous postbacks to the web server that only transmit and receive the necessary data; these techniques are commonly referred to as AJAX. Microsoft has released a free AJAX framework for ASP.NET developers named Microsoft ASP.NET AJAX. This article series examines using Microsoft's ASP.NET AJAX framework to build responsive user interfaces.

  • AJAX Basics and Getting Started with Microsoft's ASP.NET AJAX Framework - examines AJAX basics and looks at installing Microsoft ASP.NET AJAX; includes a demo of the UpdatePanel control.
  • Using the UpdatePanel - provides more in-depth and real-world examples of using the UpdatePanel.
  • Providing Visual Feedback with the UpdateProgress Control - shows how to use the UpdateProgress control to display visual feedback to the user when a partial page postback is in progress.
  • Performing Client Actions in Response to Partial Page Postbacks - learn how to execute client-side script in response to events raised by the partial page postback life-cycle.
  • Using the Timer Control - see how to asynchronously update a portion of the screen every n milliseconds.
  • Enabling Bookmarking and the Browser's Back Button - learn how to add history points to an AJAX-enabled web page so that your visitors can use their browsers' Back and Forward buttons and bookmarks.
  • Retrieving Server-Side Data Using Web Services - call Web Services from an ASP.NET AJAX application with a sprinkle of JavaScript.
  • A Look at JSON Serialization - explore the serialization format used by the ASP.NET AJAX Framework when calling Web Services from client-side script.
  • Triggering Full Page Postbacks From An UpdatePanel - learn how to override an UpdatePanel's default behavior and trigger a full page postback.
  • Refreshing An UpdatePanel With JavaScript - see how to refresh the contents of an UpdatePanel via JavaScript.
  • Rebinding Client-Side Events After a Partial Page Postback - discover how to automatically rebind client-side event handlers to HTML elements in an UpdatePanel after a partial page postback.
  • (Subscribe to this Article Series! )



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article