Post
Ask Question
Christian Doctor

Christian Doctor

  • NA
  • 5
  • 11.3k

call javascript from code behind to show and hide progress bar image using c# asp.net

Apr 21 2012 8:56 PM
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




Answers (4)