Question

我正在使用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处理程序时，它确实有效。

Answer 1

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

在上一步中创建的_tick处理程序中，调用以下代码

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

Answer 2

我会在页面上放置一个Ajax计时器，并将其设置不到一秒......它只会运行一次，在第一次打勾之后，你需要禁用它，否则它会再次触发。（你不想多次开始长时间运行的过程......）

然后在OnTimerTick事件上，我将以您的页面完全呈现的方式启动长时间运行的进程，并且可以在其运行时显示UpdateProgress。

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

Answer 3

创建一个显示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秒的时间内完成你正在做的事情......

Answer 4

我上面使用了JBrooks的想法（即将进度指示器显示为Panel的一部分，也包括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-index：2; 位置：相对; 上：-50px; }

Answer 5

使用Jquery。

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

Answer 6

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

这对我来说效果很好，只需将它添加到BODY部分的末尾，就像魅力一样。

ASP.NET 3.5：在Page_Load（）期间显示UpdateProgress

6 个答案: