Click here to Skip to main content
6,595,854 members and growing! (19,367 online)
Email Password   helpLost your password?
Web Development » ASP.NET » General     Intermediate License: The Code Project Open License (CPOL)

Progress Image while Loading Long Running Results

By ahkayastha

Loading a progress image while running a long query
C#, .NET (.NET 3.0), ASP.NET, Dev
Posted:29 Aug 2008
Views:6,370
Bookmarked:14 times
Announcements
Loading...
 
Search    
Advanced Search
Add to IE Search
printPrint   add Share
      Discuss Discuss   Broken Article?Report  
3 votes for this article.
Popularity: 1.43 Rating: 3.00 out of 5
1 vote, 33.3%
1

2

3

4
2 votes, 66.7%
5

Introduction

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.

Background

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>
        <controls>
            <add tagPrefix="asp" namespace="System.Web.UI"
            assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
            PublicKeyToken=31bf3856ad364e35"/>
        </controls>
    </pages>
    
    <httpHandlers>
        <remove verb="*" path="*.asmx"/>
        <add verb="*" path="*.asmx" validate="false"
            type="System.Web.Script.Services.ScriptHandlerFactory,
            System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
            PublicKeyToken=31bf3856ad364e35"/>
        <add verb="*" path="*_AppService.axd" validate="false"
            type="System.Web.Script.Services.ScriptHandlerFactory,
            System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
            PublicKeyToken=31bf3856ad364e35"/>
        <add verb="GET,HEAD" path="ScriptResource.axd"
            type="System.Web.Handlers.ScriptResourceHandler,
            System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
            PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>
  5. If the pages are Master-Detail pages then add “Register …. Like:”
  6. <%@ Register Assembly="AjaxControls" Namespace="AjaxControls" TagPrefix="asp" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="DetailContentHolder"
          runat="server">

    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">
        <ProgressTemplate>
            <div class="modalPopup">
            Loading
            <img height="50px" width="50px" src="Images/ajax-loader.gif"
                align="middle" />
            </div>
        </ProgressTemplate>
    </asp:ModalUpdateProgress>

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

  11. Now, all controls which are currently defining your GUI, put them under
  12. <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
    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:

    image004.jpg

  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"
    ></asp:Button>

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 %>");
    myHiddenButton.click();
}

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.

License

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

About the Author

ahkayastha


Member

Occupation: Software Developer (Senior)
Company: Computer Aid Inc.
Location: United States United States

Other popular ASP.NET articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
 Msgs 1 to 4 of 4 (Total in Forum: 4) (Refresh)FirstPrevNext
GeneralGreat article Pinmembernicky massarella4:44 28 May '09  
GeneralRe: Great article Pinmemberahkayastha10:23 2 Jun '09  
GeneralWhat if i have master page??? Pinmemberprashantvk3:10 11 Mar '09  
GeneralRe: What if i have master page??? Pinmemberahkayastha11:02 5 May '09  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 29 Aug 2008
Editor: Sean Ewington
Copyright 2008 by ahkayastha
Everything else Copyright © CodeProject, 1999-2009
Web17 | Advertise on the Code Project