2

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

4

6 回答 6

3
  1. Move your page_load code into a new function.
  2. Add a AJAX timer into the ContentTemplate section of your page. Set the interval to 500. (1/2 second)
  3. Double-click on the Timer object in Design view to create a _tick handler.

  4. In the _tick handler created in the previous step, call the following code

    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. 
}
于 2013-02-15T19:34:21.013 回答
2

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

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

you out to be able to move the code that you had for your button click to the time tick...

于 2009-05-26T16:03:29.810 回答
2

Create a normal div that shows the Ajax.gif so it shows "processing" by default.

In the javascript pageLoad() function, make a call back to the page using Ajax's PageMethods.

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

The method you are calling in your .aspx.cs file has to be static, it can take parameters and looks something like:

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

    }

The javascript function that you specified when you called the method will run when the method completes. It will be passed the results. At the end of this function you hide the 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  

   }

And then you work on making whatever it is you are doing run in less than 1 second....

于 2009-07-16T21:46:23.643 回答
1

I used JBrooks idea above (i.e. showing the progress indicator as part of a Panel that also includes the Iframe, so that it shows even before the Iframe first loads), but simplified it: style the iframe so that when it does appear it is on top of the animated GIF.

Requires no Javascript or C# code-behind.

Here's the relevant ASPX, followed by the CSS. You'll have to noodle with the "top" setting in the style to cover the image you use.

            <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; position: relative; top: -50px; }

于 2010-03-11T01:58:47.030 回答
0

With Jquery.

<script>
 $(document).ready(function() {
 $('#<%= UpdateProgress1.ClientID %>').show(); 
 });
</script>
于 2015-03-06T19:24:34.650 回答
0 
<script>  $(document).ready(function() {  $('#<%=
UpdateProgress1.ClientID %>').show();   }); </script>

This worked well for me, just had to add it to the end of the BODY section and works like a charm.

于 2015-03-19T23:57:01.887 回答