如何在異步回發期間更新頁面？

Question

我難住了。 我試圖在我的網站執行查詢時顯示進度條。 查詢需要 4-6 分鍾。 我的進度條從數據庫中獲取它的值，Oracle 有一個內置查詢來為進度條提供值。 我正在使用EssentialObjects 的 ProgressBar 。 基本上我只是將“值”設置為介於 1 和 100 之間的 integer。

這是我的代碼的簡化版本：

頁：

 <asp:UpdatePanel ID="upQuery" runat="server">
    <ContentTemplate>
        <asp:Button ID="btnExecute" runat="server" OnClick="btnExecute_Click" />
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upProgress" runat="server">
    <ContentTemplate>
        <asp:Timer ID="tmr" runat="server" Enabled="false" 
                   OnTick="tmr_Tick" Interval="3000"></asp:Timer>
        <eo:ProgressBar ID="pbr" runat="server" ></eo:ProgressBar>
    </ContentTemplate>
</asp:UpdatePanel>

代碼：

protected void btnExecute_Click(object sender, EventArgs e) {
        tmr.Enabled = true;
        ExecuteLongQuery();
}

protected void tmr_Tick(object sender, EventArgs e) {
        pbr.Value = GetProgress();
}

基本上，當我單擊 btnExecute 時，在回發完成之前計時器不會啟動，從而使進度條永遠不會顯示。 我嘗試了回調，不確定我是否做對了，但頁面在回發期間不會顯示結果。 當頁面處於異步回發狀態時，如何讓計時器（或任何東西）響應？

Answer 1

我找到了這個，它對我有用。 您可以根據需要進行更改。 它適用於每個頁面回發，如果您想限制它，請根據您的要求更改代碼。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
             .modalPopup
             {
                 background-color: #696969;
                 filter: alpha(opacity=40);
                 opacity: 0.7;
                 xindex: -1;
             }
         </style>
     </head>
     <body>
         <form id="form2" runat="server">
              <asp:ScriptManager ID="ScriptManager2" runat="server" />
              <script type="text/javascript">
                  var prm = Sys.WebForms.PageRequestManager.getInstance();
                  //Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
                  prm.add_beginRequest(BeginRequestHandler);
                  // Raised after an asynchronous postback is finished and control has been returned to the browser.
                  prm.add_endRequest(EndRequestHandler);
                  function BeginRequestHandler(sender, args) 
                  {
                      //Shows the modal popup - the update progress
                      var popup = $find('<%= modalPopup.ClientID %>');
                      if (popup != null) 
                      {
                          popup.show();
                      }
                  }

                  function EndRequestHandler(sender, args) 
                  {
                      //Hide the modal popup - the update progress
                      var popup = $find('<%= modalPopup.ClientID %>');
                      if (popup != null)  
                      {
                          popup.hide();
                      }
                  }
              </script>
              <div>
                  <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                      <ProgressTemplate>
                          <asp:Image ID="Image1" ImageUrl="waiting.gif" AlternateText="Processing" runat="server" />
                      </ProgressTemplate>
                  </asp:UpdateProgress>
                  <ajaxtoolkit:modalpopupextender id="modalPopup" runat="server" targetcontrolid="UpdateProgress" popupcontrolid="UpdateProgress" backgroundcssclass="modalPopup" />
                  <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                      <ContentTemplate>
                          <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
                      </ContentTemplate>
                  </asp:UpdatePanel>
            </div>
        </form>
    </body>
</html>

Answer 2

在回發完成之前，您啟用計時器的事實不會傳遞給客戶端。 這就是它的工作原理。 在服務器上執行代碼不會立即對客戶端產生影響。 如果您在將響應發送到客戶端之前等待ExecuteLongQuery()完成，那么您將永遠不會看到計時器。

您最好的選擇可能是在服務器上的單獨線程中運行ExecuteLongQuery() ，允許回發完成並啟動計時器。

我建議閱讀 ASP.Net 頁面生命周期——這看起來是個不錯的起點。

如何在異步回發期間更新頁面？

問題描述

2 個解決方案

解決方案1
5 2011-12-16 07:23:27

解決方案2
4 已采納 2011-07-21 12:50:34

如何在異步回發期間更新頁面？

問題描述

2 個解決方案

解決方案1 5 2011-12-16 07:23:27

解決方案2 4 已采納 2011-07-21 12:50:34

解決方案1
5 2011-12-16 07:23:27

解決方案2
4 已采納 2011-07-21 12:50:34