2010-11-01 17 views
2

Je souhaite afficher le UpdateProgress à la page A lorsqu'un utilisateur clique sur le bouton "Suivant" pour passer à la page suivante. La page suivante est la page B, qui a un important chargement de données. Lorsque le bouton est cliqué, le UpdateProgress n'apparaît pas.UpdateProgress avec un UpdatePanel

Qu'est-ce qui manque à ce code, et comment peut-on le montrer?

<asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1"> 
    <ProgressTemplate > 
     Please wait ... 
    </ProgressTemplate> 
</asp:UpdateProgress> 

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="btnNext" EventName="Click" /> 
    </Triggers>          

    <ContentTemplate>           
     <asp:Button ID="btnCancel" runat="server" TabIndex="1" Text="Cancel"onclick="btnCancel_Click" />          
     <asp:Button ID="btnNext" runat="server" TabIndex="2" Text="Next" onclick="btnNext_Click" /> 
    </ContentTemplate>         
</asp:UpdatePanel> 

Répondre

5

Essayez de régler DisplayAfter à une valeur très faible pour rendre l'indicateur de progression apparaître immédiatement, par exemple:

<asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1"> 
3

Couple de choses à essayer:

1) Déplacer le UpdateProgress contrôle à l'intérieur du UpdatePanel

2) Retirez le AssociatedUpdatePanelID attribut de la UpdateProgress tag

Je parie sur l'option 1 faire l'affaire.

EDIT

Voici une manière non ProgressTemplate, gestionnaires d'événements côté client:

<script type="text/javascript"> 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

function BeginRequestHandler(sender, args) 
{ 
    // some code to show image, e.g: 
    document.getElementById('somedivwhichasimage').className = 'show'; 
} 

function EndRequestHandler(sender, args) 
{ 
    // some code to hide image, e.g: 
    document.getElementById('somedivwhichasimage').className = 'hidden'; 
} 
</script> 
+0

Toujours pas wokring .. – Tony

+0

est ce code que vous avez affiché exact? Y at-il quelque chose qui manque? il y a d'autres façons de faire le progrès (faites-le purement côté client avec javascript). voir mon édition pour une autre option. – RPM1984

+1

Déplacez le contrôle UpdateProgress dans le UpdatePanel -> Travaillé pour moi, merci – Thomas

2

Ajouter ce code sur le code derrière de cette page.

protected void btnNext_Click(object sender, EventArgs e) 
{ 
    System.Threading.Thread.Sleep(3000); 
} 

Espérons que cela aide !!

Edit: Suivez ce lien: http://msdn.microsoft.com/en-us/library/bb386421.aspx

Ajout du code de la page ASPX que j'ai essayé et travaille,

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> 

    <asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1"> 
    <ProgressTemplate > 
    <asp:Label ID="lblwait" runat="server" Text="Please wait.."></asp:Label> 
    </ProgressTemplate> 
</asp:UpdateProgress> 

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> 
    </Triggers>          

    <ContentTemplate>           
     <asp:Button ID="btnCancel" runat="server" TabIndex="1" Text="Cancel" />          
     <asp:Button ID="Button1" runat="server" TabIndex="2" Text="Next" onclick="Button1_Click" /> 
    </ContentTemplate>         
</asp:UpdatePanel> 
+0

Toujours pas de travail .. – Tony

+0

D'une certaine manière, je ne peux pas ajouter le code, vous pouvez consulter le lien. J'espère que cela pourra aider!! – genericuser

0

essayez de mettre UpdateProgress contrôle à l'intérieur UpdatePanel. et cela devrait marcher pour vous.
espérons que cela aide!