Question

我有一个更新面板，其中包含两个按钮，一个是提交，另一个是取消。

现在我想要点击提交按钮，然后显示进度条。

但是当我点击取消按钮时，它不会显示。

<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";
}

仅在发生特定事件时在更新面板中显示UpdateProgress

1 个答案: