ASP.NET 3.5: Anzeige updateProgress während page_load ()

Question

Ich erstelle eine ASP.NET -Site mit Visual Studio 2008 und habe eine Seite wie diese (Sachen ausgeschnitten).

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

Der Page_Load startet einen langen (> 5s) Prozess

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

Wie kann ich den UpdateProgress anzeigen, während der LongrunningProcess ausgeführt wird? Es funktioniert, wenn ich den LongrunningProcess () -Anruf zu einem Knopf auf dem Handler bewege.

Answer 1

Erstellen Sie ein normales DIV, das die ajax.gif zeigt, sodass es standardmäßig "Verarbeitung" zeigt.

Machen Sie in der Funktion JavaScript pageload () mithilfe der Ajax -Pagemethods einen Anruf zur Seite zurück.

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

Die Methode, die Sie in Ihrer .aspx.cs -Datei aufrufen, muss statisch sein. Sie kann Parameter erfordern und sieht so aus wie:

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

    }

Die JavaScript -Funktion, die Sie angegeben haben, wenn Sie die Methode aufgerufen haben, wird ausgeführt, wenn die Methode abgeschlossen ist. Es wird die Ergebnisse übergeben. Am Ende dieser Funktion verbergen Sie die 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  

   }

Und dann arbeiten Sie daran, was auch immer Sie in weniger als 1 Sekunde laufen lassen ...

Answer 2

1. Verschieben Sie Ihren Page_Load -Code in eine neue Funktion.
2. Fügen Sie einen Ajax -Timer in den Abschnitt ContentTemplate Ihrer Seite hinzu. Setzen Sie das Intervall auf 500. (1/2 Sekunde)
3. Doppelklicken Sie auf das Timer-Objekt in der Designansicht, um einen _tick-Handler zu erstellen.

4. Rufen Sie im im vorherigen Schritt erstellten _tick -Handler den folgenden Code an

   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 3

Ich würde einen Ajax -Timer auf die Seite setzen und es für weniger als eine Sekunde einstellen ... es wird nur einmal ausgeführt und nach dem ersten Tick müssen Sie es deaktivieren, sonst wird es wieder abgefeuert. (Sie möchten nicht mehr als einmal mit Ihrem langjährigen Prozess beginnen ...)

Auf dem OnTimerTick -Ereignis würde ich dann Ihren langjährigen Prozess so starten, dass Ihre Seite vollständig rendert und Sie Ihr UpdateProgres anweisen können, während Sie ausgeführt werden.

Sie können den Code, den Sie für Ihre Schaltfläche hatten, verschieben können. Klicken Sie auf die Zeit, die Sie tickten ...

Answer 4

Ich habe die Jrooks -Idee oben verwendet (dh die Fortschrittsanzeige als Teil eines Panels, das auch den IFrame enthält, so dass er noch vor dem Iframe angezeigt wird), aber vereinfacht es: Style the iframe so, dass es angezeigt wird Oberseite des animierten GIF.

Benötigt kein JavaScript oder C# Code-Behind.

Hier ist der relevante ASPX, gefolgt vom CSS. Sie müssen mit der "Top" -Auseinstellung im Stil nudeln, um das von Ihnen verwendete Bild abzudecken.

            <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: Relativ; Top: -50px; }

Answer 5

Mit JQuery.

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

Answer 6

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

Dies funktionierte gut für mich, musste es nur zum Ende des Körperabschnitts hinzufügen und wie ein Zauber wirkt.