ASP.NET 3.5: Affichage UpdateProgress pendant Page_Load ()

Question

Je construis un site ASP.NET à l'aide de Visual Studio 2008 et une page qui ressemble à ceci (substance ciselée)

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

Le page_load commence un processus long (> 5s)

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

Comment puis-je afficher le UpdateProgress alors que le LongRunningProcess est en cours d'exécution? Il fonctionne lorsque je déplace l'appel LongRunningProcess () à un bouton gestionnaire onclick.

Answer 1

Créer une div normale qui montre l'Ajax.gif il montre « traitement » par défaut.

Dans la fonction javascript pageLoad (), faire un appel sur la page en utilisant les PageMethods de l'Ajax.

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

La méthode que vous appelez dans votre fichier .aspx.cs doit être statique, il peut prendre des paramètres et ressemble à quelque chose comme:

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

    }

La fonction javascript que vous avez spécifié lorsque vous avez appelé la méthode fonctionnera lorsque la méthode est terminée. Il sera transmis les résultats. A la fin de cette fonction vous cacher la div Ajax.gif.

   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  

   }

Et puis vous travaillez à rendre tout ce que vous faites courir en moins de 1 seconde ....

Answer 2

1. Déplacez votre code page_load dans une nouvelle fonction.
2. Ajoutez une minuterie AJAX dans la section ContentTemplate de votre page. Régler l'intervalle à 500. (1/2 seconde)
3. Double-cliquez sur l'objet Timer en mode Création pour créer un gestionnaire de _tick.

4. Dans le gestionnaire d'_tick créé à l'étape précédente, appeler le code ci-dessous

   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

Je mettrais une minuterie Ajax sur la page et définissez pour moins d'une seconde ... Il ne fonctionnera une fois et après sa première coche alors vous devez le désactiver sinon il se déclenche à nouveau. (Vous ne voulez pas commencer votre processus long plus d'une fois ...)

puis sur l'événement OnTimerTick je commencerais votre long processus en cours d'exécution de cette façon votre page rend pleinement et vous pouvez afficher votre UpdateProgress pendant son fonctionnement.

vous sur d'être en mesure de déplacer le code que vous aviez pour votre bouton clic pour la tique du temps ...

Answer 4

je JBrooks idée ci-dessus (montrant l'indicateur de progression dans le cadre d'un groupe spécial qui comprend également l'Iframe, de sorte qu'il montre avant même les premières charges iFrame), mais simplifié il: le style de l'iframe de sorte que quand il ne semble il est au-dessus du GIF animé.

aucune Javascript ou C # code-behind.

Voici le ASPX pertinent, suivi du CSS. Vous aurez à nouilles avec le « top » mise dans le style pour couvrir l'image que vous utilisez.

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

Answer 5

Jquery.

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

Answer 6

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

Cela a bien fonctionné pour moi, tout a dû ajouter à la fin de la section du corps et fonctionne comme un charme.