ASP.NET 3.5: Display Update während Page_Load()

Question

Ich baue eine ASP.NET-Website Visual Studio 2008 verwenden und eine Seite, wie folgt aussehen (Zeug snipped)

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

Die page_load eine lange beginnt (> 5s) Prozess

Wie kann ich UpdateProgress anzeigen, während der LongRunningProcess läuft? Es funktioniert, wenn ich den LongRunningProcess() Aufruf zu einem Button onclick-Handler verschiebe.

Answer 1

ein normales div erstellen, die die Ajax.gif zeigt, so dass es standardmäßig „Verarbeitung“ zeigt.

in der JavaScript-pageload() Funktion, einen Aufruf an die Seite stellen zurück Pagemethods Ajax verwenden.

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

Die Methode, die Sie in Ihrem aspx.cs Datei aufrufen muss statisch sein, es können Parameter übernehmen und sieht ungefähr so ​​aus:

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

    } 

die JavaScript-Funktion, die Sie angegeben haben, als Sie die angerufene Methode wird ausgeführt, wenn die Methode abgeschlossen ist. Es werden die Ergebnisse übergeben. Am Ende dieser Funktion verstecken Sie das 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 sind Sie auf zu machen arbeiten, was auch immer es ist, Sie laufen in weniger als 1 Sekunde tun ....

Answer 2

würde ich einen Ajax-Timer auf der Seite setzen und legen Sie sie für weniger als eine Sekunde ... Es wird nur einmal ausgeführt und nach seinem ersten tick dann müssen Sie es deaktivieren, sonst wird es wieder Feuer. (Sie möchten nicht Ihren langwierigen Prozess mehr als einmal starten ...)

dann auf dem OnTimerTick-Ereignis Ich würde Ihren lang laufenden Prozess auf diese Weise starten Ihre Seite vollständig rendert und Sie können Ihre UpdateProgress während seiner Ausführung anzeigen .

Sie aus der Lage sein, den Code zu verschieben, die Sie für den Button klicken, um die Zeit Zecke hatte ...

Answer 3

verwendete ich JBrooks Idee oben (dh die Fortschrittsanzeige im Rahmen eines Panels zeigen, dass enthält auch das Iframe, so dass es angezeigt wird, bevor das Iframe zuerst geladen wird, aber vereinfacht es: style den iframe so, dass, wenn es erscheint, es über dem animierten GIF ist.

Erfordert kein Javascript oder C# -Code-behind.

Hier ist der relevante ASPX, durch die CSS gefolgt. Sie müssen mit der Einstellung "top" im Stil nudeln, um das 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; oben: -50px; }

Answer 4

1. Verschieben Sie Ihren Code page_load in eine neue Funktion.
2. einen AJAX-Timer in den Contentbereich Ihrer Seite hinzufügen. Legen Sie das Intervall auf 500 fest.(1/2 Sekunde)
3. Doppelklicken Sie auf das Objekt Timer in der Entwurfsansicht, um einen _tick-Handler zu erstellen.

4. Im _tick Handler im vorherigen Schritt erstellt haben, rufen Sie den folgenden 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. 
   } 
   

Answer 5

Mit JQuery.

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

Answer 6

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

Das funktionierte gut für mich, mußte es einfach von dem Körperabschnitt zu Ende hinzufügen und wirkt wie ein Zauber.