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

发布于 2024-11-25 02:29:13 字数 1252 浏览 1 评论 0原文

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

这是我的代码的简化版本：

Page:

 <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 时，计时器不会启动，直到回发完成，使进度条从不显示。我尝试了回调，不确定我是否做对了，但是页面在回发期间不会显示结果。当页面处于异步回发状态时，如何让计时器（或任何东西）做出响应？

原文

I'm stumped. I am attempting to show a progress bar while my site executes a query. The query takes anywhere from 4-6 minutes. My progress bar gets its value from the database, Oracle has a built-in query to provide the values to the progress bar. I'm using EssentialObjects' ProgressBar. Basically I just set "Value" to an integer between 1 and 100.

Here is a simplified version of my code:

Page:

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

Code:

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

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

Basically when I click btnExecute, the timer doesn't start until the postback has completed, making the progress bar never show. I tried a callback, not sure if I did it right, but the page wouldn't show the result during postback. How do I get the timer (or anything) to respond while the page is in async postback?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魂牵梦绕锁你心扉 2024-12-02 02:29:13

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

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

我建议阅读 ASP.Net 页面生命周期 - this 看起来就像一个好的起点。

回复收藏 0 原文

心舞飞扬 2024-12-02 02:29:13

我发现了这个，它对我有用。您可以根据您的需要更改它。它适用于每个页面回发，如果您想限制它，请根据您的要求更改代码。

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

I found this and It works for me. You can change it according to your needs. It works for every page postback, and if you want to restrict it, then change in code for your requirements.

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

回复收藏 0 原文

~没有更多了~