[C# .Net] UpdateProgress doet het niet goed

[Sand0rf]

Goedendag,

Ik ben bezig met een klein wizardachtig formuliertje wat in een updatepanel draait. Voor de verschillende "formulier" bladen heb ik in mijn updatepanel een aantal gewone panels gemaakt die ik vanuit de code behind zichtbaar of onzichtbaar maak. Omdat het formulier informatie uitwisseld met andere systemen en ook informatie in een database moet opslaan kan er sommige enige wachttijd opslaan.

Daarom heb ik een updateProgress gemaakt die een mooi wachtbalke laat zien. Helaas komt de progresstemplate alleen maar de allereerste keer in beeld. Bij nogmaals drukken wordt hij niet zichtbaar en ook een andere button maakt niet uit. Mijn code ziet er zo uit

Aanmelden.aspx

C#:

<asp:UpdatePanel ID="updateDeelnemer" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
            <ContentTemplate>
                <div style="width:100%; height:40px; line-height:40px; font-size:20px; font-weight:bold; background-color:#CCC;">
                    <span style="margin-left:10px">Stap <asp:Label ID="lblDeelnemerNummer" runat="server" /></span>
                </div>
                <div>
                    <div class="textBox">
                        <!-- stap 1 -->
                        <asp:Panel ID="pnlDeelnemerStap1" runat="server">
                            //Aantal form elementen (2 textboxen)
                            <br /><br />
                            <asp:Button ID="btnDeelnemer1" runat="server" OnClick="deelnemer1Click" Text="Volgende" ValidationGroup="deelnemer1" Width="100px" BackColor="White" BorderWidth="1px" BorderColor="Black" />
                              &nbsp;&nbsp;<asp:Label ID="lblDeelnemer1Message" runat="server" ForeColor="Red" />
                            <br />
                        </asp:Panel>
                        <!-- stap 2 -->
                        <asp:Panel ID="pnlDeelnemerStap2" runat="server" Visible="false">
                            //Nog een aantal form elementen (2x textbox, 1x checkbox)
                            <asp:Button ID="btnDeelnemer2" OnClick="deelnemer2Click" runat="server" Text="Volgende" ValidationGroup="deelnemer2" Width="100px" BackColor="White" BorderWidth="1px" BorderColor="Black" />&nbsp;&nbsp;
                            <asp:Label ID="lblDeelnemer2Message" runat="server" ForeColor="Red" />
                        </asp:Panel>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnDeelnemer1" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="btnDeelnemer2" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:UpdateProgress runat="server" AssociatedUpdatePanelID="updateDeelnemer" DisplayAfter="0" >
            <ProgressTemplate>
                <div style="margin-left:30px; margin-top:10px; height:40px; line-height:32px;">
                    <div style="float:left;">
                        <img src="Styles/Images/ajax-loader.gif" alt="Een ogenblik" />
                    </div>
                    <div style="float:left; line-height:32px; margin-left:5px;">
                        Een ogenblik geduld..
                    </div>
                    &nbsp;
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
</div>

Code Behind

C#:

protected void deelnemer1Click(object sender, EventArgs e)
    {
        //Wissel wat informatie met een ander systeem uit
        pnlDeelnemerStap1.Visible = false;
        pnlDeelnemerStap2.Visible = true;
        lblDeelnemerNummer.Text = "2";
    }

    protected void deelnemer2Click(object sender, EventArgs e)
    {
        Thread.Sleep(8000);
        updateDeelnemer.Update();
        lblDeelnemer2Message.Text = "Done";
    }  

Ik heb al op internet gezocht en een aantal mogelijke oplossingen gevonden (displayAfter in de updateProgress, handmatig de thread laten slapen etc) maar die hebben allemaal nog geen oplossing gegeven.

Iemand hier enig idee?

[Haan]

Even wat ideetjes die bij mij opkomen:

Heb je geprobeerd zonder UpdateMode="Conditional" of dat wel werkt?
PostbackTrigger ipv Async?
DisplayAfter kan je net zo goed weglaten, de default instelling is al prima

[Luuk1983]

Check je div's even heel goed, die worden niet allemaal goed afgesloten. Jouw code werkte bij mij inderdaad ook niet, maar met wat geklooi heb ik dit werkend gekregen (alle code tussen de form tags):

C#:

    <form id="form1" runat="server">
        <asp:scriptmanager runat="server"></asp:scriptmanager>
        <asp:UpdatePanel ID="updateDeelnemer" runat="server"> 
            <ContentTemplate> 
                <div style="width:100%; height:40px; line-height:40px; font-size:20px; font-weight:bold; background-color:#CCC;"> 
                    <span style="margin-left:10px">Stap <asp:Label ID="lblDeelnemerNummer" runat="server" /></span> 
                </div> 
                    <div class="textBox"> 
                        <!-- stap 1 --> 
                        <asp:Panel ID="pnlDeelnemerStap1" runat="server"> 
                            //Aantal form elementen (2 textboxen) 
                            <br /><br /> 
              <asp:Button ID="btnDeelnemer1" runat="server" OnClick="deelnemer1Click" Text="Volgende" ValidationGroup="deelnemer1" Width="100px" BackColor="White" BorderWidth="1px" BorderColor="Black" /> 
              &nbsp;&nbsp;<asp:Label ID="lblDeelnemer1Message" runat="server" ForeColor="Red" /> 
              <br /> 
                        </asp:Panel> 
            <!-- stap 2 --> 
            <asp:Panel ID="pnlDeelnemerStap2" runat="server" Visible="false"> 
                            //Nog een aantal form elementen (2x textbox, 1x checkbox) 
              <asp:Button ID="btnDeelnemer2" OnClick="deelnemer2Click" runat="server" Text="Volgende" ValidationGroup="deelnemer2" Width="100px" BackColor="White" BorderWidth="1px" BorderColor="Black" />&nbsp;&nbsp; 
              <asp:Label ID="lblDeelnemer2Message" runat="server" ForeColor="Red" /> 
                        </asp:Panel>
                    </div> 
                </ContentTemplate> 
            </asp:UpdatePanel> 
        
            <asp:UpdateProgress runat="server" AssociatedUpdatePanelID="updateDeelnemer" DisplayAfter="0" > 
                <ProgressTemplate> 
                    <div style="margin-left:30px; margin-top:10px; height:40px; line-height:32px;"> 
                        <div style="float:left;"> 
                            <img src="Styles/Images/ajax-loader.gif" alt="Een ogenblik" /> 
                        </div> 
                        <div style="float:left; line-height:32px; margin-left:5px;"> 
                            Een ogenblik geduld.. 
                        </div> 
                        &nbsp; 
                    </div> 
                </ProgressTemplate> 
            </asp:UpdateProgress> 
    </form>

Omdat ik niet precies meer weet wat ik veranderd heb kan je uit mijn code vast de verschillen halen. Maar de essentie is dat niet alle tags kloppen, waardoor de updatepanel div na de eerste keer niet meer gerendered wordt.

[ Voor 7% gewijzigd door Luuk1983 op 04-11-2011 10:12 ]

[Sand0rf]

De rede dat de div's niet in het updatepanel niet werden afgesloten was omdat anders de loader buiten de div zichtbaar zou worden en ik wilde dat niet. Ik had het ondertussen al op een andere manier opgelost. Op de knoppen attribuut onClientClick een klein javascriptje uitvoeren die een div zichtbaar maakt. Aan het einde van de methode in de code behind een andere javascript methode aanroepen die vervolgens de loader div weer onzichtbaar maakt.

@Haan, die dingen had ik al geprobeerd maar maakte geen verschil

Toch bedankt, ga er de volgende keer eens naar kijken want het zou uiteraard wel gewoon moeten werken.