ASP.NET 3.5：在 Page_Load() 期间显示 UpdateProgress答案

【问题标题】：ASP.NET 3.5: Display UpdateProgress during Page_Load()ASP.NET 3.5：在 Page_Load() 期间显示 UpdateProgress
【发布时间】：2015-03-20 08:20:18
【问题描述】：

我正在使用 Visual Studio 2008 构建一个 ASP.NET 站点，并且有一个看起来像这样的页面（东西被剪掉了）

<asp:Content ID="Content2" ContentPlaceHolderID="PageContentPlaceHolder" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            the page here..
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
        <ProgressTemplate>
            <div>
                <asp:Image ID="AjaxImage" runat="server" ImageUrl="Ajax.gif" />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Content>

page_load 启动一个长（>5s）的过程

protected void Page_Load(object sender, EventArgs e)
{            
  if (!IsPostBack)            
  {
    LongRunningProcess();                
  }
}

如何在 LongRunningProcess 运行时显示 UpdateProgress？当我将 LongRunningProcess() 调用移动到按钮 onclick 处理程序时，它确实有效。

【问题讨论】：

标签： asp.net pageload updateprogress

【解决方案1】：

将 page_load 代码移动到新函数中。
将 AJAX 计时器添加到页面的 ContentTemplate 部分。将时间间隔设置为 500。（1/2 秒）
在设计视图中双击 Timer 对象以创建 _tick 处理程序。

在上一步创建的_tick handler中，调用如下代码

protected void My_Timer_Tick(object sender, EventArgs e)
{
    My_Timer_Name.Enabled = false;
    My_Page_Load_Function(); // Function created in step 1 above)
}

protected void My_Page_Load_Function()
{
    System.Threading.Thread.Sleep(5000); // A delay to simulate doing something.
    lblMyLabel.Text = "Done!";  // Write output to page. 
}

【讨论】：

【解决方案2】：

创建一个显示 Ajax.gif 的普通 div，以便默认显示“处理”。

在 javascript pageLoad() 函数中，使用 Ajax 的 PageMethods 回调页面。

   function pageLoad(sender, args) {
                PageMethods.getVersions(LoadVersionsCallback);
    }

您在 .aspx.cs 文件中调用的方法必须是静态的，它可以接受参数并且看起来像：

   [System.Web.Services.WebMethod]
    public static string getVersions()
    {
      StringBuilder sb = new StringBuilder();
       ... etc.
      return sb.ToString();

    }

您在调用该方法时指定的 javascript 函数将在该方法完成时运行。它将通过结果。在这个函数的最后你隐藏了 Ajax.gif div。

   function LoadVersionsCallback(result) {
    // do something with the results - I load a dropdown list box.

   ...etc. 
    // here is where you hide your div holding the Ajax.gif  

   }

然后你可以在不到 1 秒的时间内让你正在做的事情运行起来......

【讨论】：

嗨@JBrooks，我有同样的问题，并试图了解您的解决方案。我用加载图像创建了 div。 Alos 有 Javascript pageLoad 方法，现在我想知道在 getVersions 和 LoadVersionsCallback 中写什么？我正在使用框架 4.0，这个解决方案在 4.0 中也有用吗？
@user1181942 getVersion 方法持有需要很长时间的进程。 LoadVersionsCallback 只是在进程完成后清理。它适用于框架 4.0。

【解决方案3】：

我会在页面上放置一个 Ajax 计时器并将其设置为不到一秒钟...它只会运行一次，并且在第一次滴答之后您需要禁用它，否则它会再次触发。（您不想多次启动长时间运行的进程...）

然后在 OnTimerTick 事件中，我将开始您的长时间运行过程，这样您的页面就会完全呈现，并且您可以在运行时显示您的 UpdateProgress。

您可以将按钮单击的代码移动到时间刻度...

【讨论】：

【解决方案4】：

我在上面使用了 JBrooks 的想法（即将进度指示器显示为还包括 iframe 的面板的一部分，以便它甚至在 iframe 首次加载之前显示），但对其进行了简化：设置 iframe 的样式，以便它出现时它位于动画 GIF 之上。

不需要 Javascript 或 C# 代码隐藏。

这是相关的 ASPX，然后是 CSS。您必须使用样式中的“顶部”设置来覆盖您使用的图像。

            <asp:Panel ID="DetailPanel" runat="server" CssClass="submitBox detailPanel">
                <asp:Table ID="Table1" runat="server" Width="100%">
                    <asp:TableHeaderRow ID="TableHeaderRow10" runat="server">
                        <asp:TableCell ID="TableHeaderCell" runat="server"
                            Font-Bold="true" HorizontalAlign="Center">
                        Title Text
                        </asp:TableCell>
                    </asp:TableHeaderRow>
                    <asp:TableRow>
                        <asp:TableCell HorizontalAlign="Center">
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/animated_progress.gif" />
                        </asp:TableCell>
                    </asp:TableRow>
                </asp:Table>
                <div class="iframeOverlay">
                    <iframe id="IframeDetail" runat="server" style="width: 100%; height: 100%;" />
                </div>
            </asp:Panel>

.iframeOverlay { z指数：2；位置：相对；顶部：-50 像素； }

【讨论】：

【解决方案5】：

使用 Jquery。

<script>
 $(document).ready(function() {
 $('#<%= UpdateProgress1.ClientID %>').show(); 
 });
</script>

【讨论】：

【解决方案6】：

<script>  $(document).ready(function() {  $('#<%=
UpdateProgress1.ClientID %>').show();   }); </script>

这对我来说效果很好，只需将其添加到 BODY 部分的末尾就可以了。

【讨论】：