特定のイベントが発生した場合にのみ更新パネルにUpdateProgressを表示します。

Question

私は2つのボタンを含む更新パネルを持っています。

これで、送信ボタンをクリックして、進行状況バーが表示されるようにしたいと思います。

しかし、キャンセルボタンをクリックすると表示されません。

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <ContentTemplate> 
    <br /> 
         <asp:UpdateProgress runat="server" ID="PageUpdateProgress" DisplayAfter="0" > 
          <ProgressTemplate> 
           <img src="../images/ajax-loader.gif" alt="Loading...." /><br /> 
          </ProgressTemplate>        
         </asp:UpdateProgress> 

<asp:LinkButton ID="lnkSubmit" runat="server" CssClass="lnk">Submit</asp:LinkButton> 
    <asp:LinkButton ID="lnkCancel" runat="server" CssClass="lnk">Cancel</asp:LinkButton> 
    </ContentTemplate> 
</asp:UpdatePanel> 

私はそれを解決するために疲れて助けてください。

おかげで、Rajbir

Answer 1

 <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <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 
      var panelProg = $get('divImage');     
      panelProg.style.display = 'none'; 

      // Enable button that caused a postback 
      $get(sender._postBackSettings.sourceElement.id).disabled = false; 
     } 
    </script> 

    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <asp:Label ID="lblText" runat="server" Text=""></asp:Label> 
      <div id="divImage" style="display:none"> 
       <asp:Image ID="img1" runat="server" ImageUrl="~/images/progress.gif" /> 
       Processing... 
      </div>     
      <br /> 
      <asp:Button ID="btnInvoke" runat="server" Text="Click" 
       onclick="btnInvoke_Click" /> 
     </ContentTemplate> 
    </asp:UpdatePanel> 

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