hi Guys,
I want to ask help regarding my concern.
I want to put a progress bar image button to show on a center of the page while i am doing server task like: "search, delete and save"; Display a response.write message like "Record Save!" And afterwards, hide the progress bar image after the server task.
I have the initial codes but still, I haven't successfully achieve what i want.
Here is the image
HERE IS THE ASPX
<body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Save" onclick="Button1_Click" /> </ContentTemplate> </asp:UpdatePanel> </div> <script type="text/javascript" language="javascript"> var ModalProgress = '<%= ModalProgress.ClientID %>'; </script> <div> <script src="Script/UpdatePanelProgress.js" type="text/javascript"></script> <asp:Panel ID="panelUpdateProgress" runat="server" > <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter ="0"> <ProgressTemplate> <img src="App_Themes/Themes/progressor.gif" style="vertical-align: middle" alt="Processing" /> </ProgressTemplate> </asp:UpdateProgress> </asp:Panel> <cc1:ModalPopupExtender ID="ModalProgress" runat="server" BackgroundCssClass ="modalBackground" TargetControlID ="panelUpdateProgress" PopupControlID ="panelUpdateProgress"> </cc1:ModalPopupExtender> </div> </form></body>HERE IS THE JAVASCRIPT named : UpdatePanelProgress.js ATTACHED ON THE ASPX. THAT WILL BE CALLED TO SHOW AND HIDE
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);function beginReq(sender, args){ $find(ModalProgress).show();}function endReq(sender, args){ $find(ModalProgress).hide();} HERE IS THE CODE BEHIND AND I DONT KNOW WHAT TO DO :-(
protected void Button1_Click(object sender, EventArgs e)
{
1. // call the call the js function beginReq() that will show the image.
2. // do server task "save,delete etc " and call response.write "Successfully save" etc..
3. // call the js function endReq() to hide the image
}Or perhaps you have the same code that is the same logic which you want to share. I will use it on the project
Thanks in advance