如何在异步回发期间更新页面?

时间:2011-07-20 21:17:13

标签: c# asp.net ajax asynchronous progress-bar

我很难过。我试图在我的网站执行查询时显示进度条。查询需要4-6分钟。我的进度条从数据库中获取其值,Oracle有一个内置查询来为进度条提供值。我正在使用EssentialObjects' ProgressBar。基本上我只是将“Value”设置为1到100之间的整数。

以下是我的代码的简化版本:

页:

 <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时,计时器在回发完成之前不会启动,因此进度条永远不会显示。我尝试了一个回调,不确定我是否正确,但页面不会在回发期间显示结果。当页面处于异步回发状态时,如何让计时器(或任何东西)响应?

2 个答案:

答案 0 :(得分:5)

我找到了这个,它对我有用。您可以根据需要进行更改。它适用于每个页面回发,如果您想限制它,则根据您的要求更改代码。

<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>

答案 1 :(得分:4)

在回发完成之前,您已启用计时器的事实不会传递给客户端。这就是它的工作原理。在服务器上执行代码不会立即对客户端产生影响。如果您在将响应发送到客户端之前等待ExecuteLongQuery()完成,那么您将永远不会看到计时器。

你最好的选择可能是在服务器上的一个单独的线程中运行ExecuteLongQuery(),允许回发完成并启动计时器。

我建议阅读ASP.Net页面生命周期 - this看起来是个好地方。