ajax "loading" icon with UpdatePanel postbacks
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>
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";}
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>