ajax "loading" icon with UpdatePanel postbacks

I have a form that is being dynamically built depending on user selection using Ajax (built in .NET Ajax with UpdatePanel).

how can I insert a “standard” ajax loading icon (maybe have it attached to the mouse pointer) while the postback is happening then remove it when the post back is finished?

I do have the AjaxToolKit installed if that helps.

Contents hide

Answers:

Method 1

Method 2

Method 3

Method 4

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

use updateprogress of tool kit :hope this will help you

<asp:updatepanel id="ResultsUpdatePanel" runat="server">    
<contenttemplate>

<div style="text-align:center;">
    <asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="ResultsUpdatePanel" dynamiclayout="true">
                        <progresstemplate>

                           <img src="support/images/loading.gif">

                        </progresstemplate>
                    </asp:updateprogress>

                    </div>

 //your control code
</contenttemplate>
</asp:updatepanel>

Method 2

Use following code…

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title></title>
 </head>
 <body>
    <form id="form1" runat="server">
     <div>
         <asp:ScriptManager ID="ScriptManager1" runat="server">
          </asp:ScriptManager>
    <asp:UpdateProgress ID="updProgress"
    AssociatedUpdatePanelID="UpdatePanel1"
    runat="server">
        <ProgressTemplate>            
        <img alt="progress" src="images/progress.gif"/>
           Processing...            
        </ProgressTemplate>
    </asp:UpdateProgress>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
            <br />
            <asp:Button ID="btnInvoke" runat="server" Text="Click" 
                onclick="btnInvoke_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>         
      </div>
   </form>
  </body>
</html>


protected void btnInvoke_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    lblText.Text = "Processing completed";
}

Method 3

here I found some JavaScript to make update process yourself and also you can put it anywhere in page and it work any update panel in page .

<script type="text/javascript">
             // Get the instance of PageRequestManager.
             var prm = Sys.WebForms.PageRequestManager.getInstance();
             // Add initializeRequest and endRequest
             prm.add_initializeRequest(prm_InitializeRequest);
             prm.add_endRequest(prm_EndRequest);

             // Called when async postback begins
             function prm_InitializeRequest(sender, args) {
                 // get the divImage and set it to visible
                 var panelProg = $get('divImage');                
                 panelProg.style.display = '';
                 // reset label text
                 var lbl = $get('<%= this.lblText.ClientID %>');
                 lbl.innerHTML = '';

                 // Disable button that caused a postback
                 $get(args._postBackElement.id).disabled = true;
             }

             // Called when async postback ends
             function prm_EndRequest(sender, args) {
                 // get the divImage and hide it again
                     $('divImage').hide();                
                  // Enable button that caused a postback
                 $get(sender._postBackSettings.sourceElement.id).disabled = false;
             }
         </script>

Method 4

<asp:UpdateProgress ID="updateProgress" runat="server">
            <ProgressTemplate>
                <div class="loading-panel">
                    <div class="loading-container">
                        <img src="<%= this.ResolveUrl("~/images/gears.gif")%>" />
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <style>
            .loading-panel {
                background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
                position: relative;
                width: 100%;
            }

            .loading-container {
                background: rgba(49, 133, 156, 0.4) none repeat scroll 0 0;
                color: #fff;
                font-size: 90px;
                height: 100%;
                left: 0;
                padding-top: 15%;
                position: fixed;
                text-align: center;
                top: 0;
                width: 100%;
                z-index: 999999;
            }
        </style>

Loading images from:http://loading.io/

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating