Click here to Skip to main content
12,818,785 members (27,863 online)
Click here to Skip to main content
Add your own
alternative version


20 bookmarked
Posted 29 Aug 2008

Progress Image while Loading Long Running Results

, 29 Aug 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Loading a progress image while running a long query


This document will explain how to convert your normal ASP.NET, which is executing long running queries — to AJAX enabled code, which will display a loading image instead of a traditional progress bar.


I struggled a lot to display the loading image into my application.

Using the Code

  1. I have used AJAXControls.dll from the extract which I got from another article on Code Project: Atlas: ModalUpdateProgress - An UpdateProgress Control in Modal Popup Style
  2. Now add references of AjaxControls, System.Web.Extensions and System.Web.Extensions.Design to your application.
  3. Add the following code between <system.web> </system.web> tags:
  4. <pages>
            <add tagPrefix="asp" namespace="System.Web.UI"
            assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
        <remove verb="*" path="*.asmx"/>
        <add verb="*" path="*.asmx" validate="false"
            System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
        <add verb="*" path="*_AppService.axd" validate="false"
            System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
        <add verb="GET,HEAD" path="ScriptResource.axd"
            System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
            PublicKeyToken=31bf3856ad364e35" validate="false"/>
  5. If the pages are Master-Detail pages then add “Register …. Like:”
  6. <%@ Register Assembly="AjaxControls" Namespace="AjaxControls" TagPrefix="asp" %>

    Here @Register line should be before <asp:Content . . . > line.

  7. Now in the first line of code add below line:
  8. <asp:ScriptManager ID="ScriptManager1" runat="server" />

    In my case, I have used <Script> …. </Script>. So, the above line will be immediately after the end of the </Script> tag.

  9. Add ModalUpdateProgress tag:
  10. <asp:ModalUpdateProgress ID="ModalUpdateProgress1" runat="server"
        DisplayAfter="0" BackgroundCssClass="modalProgressGreyBackground">
            <div class="modalPopup">
            <img height="50px" width="50px" src="Images/ajax-loader.gif"
                align="middle" />

    Here, with this loading gif you can generate at your own leisure and download it from the site:

  11. Now, all controls which are currently defining your GUI, put them under
  12. <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    table cellpadding="0" width="100%" class="TableDataEntry">

    Here on my Search Button, I am loading the data in grid. So, in the triggers, I have added that button’s ID.

  13. In my case, I am using one more button called “Download,” which will download data into an Excel sheet.
  14. Now, here if I keep the code like above and try to Download the data, it will try to popup the save as dialog:

    And before that it will throw the error like:


  15. To avoid this error, I tried following:
  16. Remove the Onclick event of the Download button. Instead of it, add OnClientClick = "javascript:DownLoadClick()"

For that, after enough R&D, I have added one hidden button outside the <asp:UpdatePanel> tag…

Generally, this button will be in the beginning of the code like:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:Button ID="btnDownload" runat="server" Height="0" Width="0" Text="Download"
        CausesValidation="false" OnClick="Download_Click"

This button will now call the Download_Click event, which is a code-behind event.

And also, don’t forget to add the following JavaScript function under the <script> tag:

function DownLoadClick()
    var myHiddenButton = document.getElementById("<%=btnDownload.ClientID %>");;

Points of Interest

In point 9 above, to avoid the error, either you can keep the control outside of UpdatePanel or if not, then create one dummy control, which is outside of UpdatePanel. Then, from the original control, and using JavaScript, call the code behind; otherwise your page will not get the visual effect of the control event which is inside the Updatepanel.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) Computer Aid Inc.
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralGreat article Pin
nicky massarella28-May-09 4:44
membernicky massarella28-May-09 4:44 
GeneralRe: Great article Pin
ahkayastha2-Jun-09 10:23
memberahkayastha2-Jun-09 10:23 
QuestionWhat if i have master page??? Pin
prashantvk11-Mar-09 3:10
memberprashantvk11-Mar-09 3:10 
AnswerRe: What if i have master page??? Pin
ahkayastha5-May-09 11:02
memberahkayastha5-May-09 11:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170308.1 | Last Updated 29 Aug 2008
Article Copyright 2008 by ahkayastha
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid