Why does a button control need to be clicked twice?

Question

I've got a web application working using VB and Ajax. I'm using updatepanels to avoid the irritating "flicker" on postbacks to the server.

I would like to have a button control defined within the updatepanel itself (tried moving it outside and got some catastrophic error, so left it there) that makes the current panel not visible and a sibling panel visible. This works with the exception that the button must be clicked twice. Not double clicked, but clicked once than clicked again.

In setting breakpoints I discovered the code behind that's attached to the button is actually being executed on the first click, but the panels don't switch as expected. If I click the same button OR worse yet, a different button, the expected behavior of the second panel appearing occurs. However, with the second button being clicked there's an unwanted bonus of a third panel being displayed, the third panel being made visible due to the second button being clicked.

I'm assuming this behavior is due to the updatepanel and its Ajax nature. Is there a way to avoid the second click? Am I misusing the updatepanel? I really wanted to use a modal popup (right out of the AjaxToolKit) but had problems with posting back the data so I opted for this approach. Any insights, assistance, even criticism would be welcome as this has plagued me long enough. Thanks

Answer 1

It would help if you posted the button click code.

Answer 2

If you get rid of the UpdatePanels do things work as expected with PostBacks? Chances are something in your Page_Load or other event higher up the chain are "resetting" things in some way before it gets to your click event. Could this be the case?

Answer 3

Is the button a Trigger of the updatepanel? Also, does setting updatemode to Always fix the problem?

Answer 4

I have run into this before and resolved it, I just can't remember how. I will try to find my old code and get back to you. one thought, do you have EnablePartialRendering enabled in your scriptmanager? maybe try wrapping both containers in a third panel.

Answer 5

WOW! What great response time. Here is sample code. The button is not a trigger. Updatemode= Always is set.

<asp:panel ID="Panel2" DefaultButton="btnPrvCmt" runat=server>
    <asp:Panel id="pnldetTI" runat="server" cssclass="collapsePanel" >
        <asp:UpdatePanel ID=upnlTransfers runat=server UpdateMode=Always>
            <ContentTemplate>
                <asp:GridView ID="gvFundIn" runat="server" AllowSorting="True" ShowFooter=true DataSourceID="sdsTransfers" DataKeyNames="FundsIn_ID,Last_Update_Date,Follow_Up_Date" AutoGenerateColumns="False" Width="510px" >
                    <Columns>

blah blah blah

                    </Columns>
                    <EmptyDataTemplate>


                    </EmptyDataTemplate> 
                </asp:GridView>
                    <asp:Panel ID="pnldvFundInActions" runat=server>
                        <br />
                        <div align=center>
                            <asp:Button ID="btnTIPending" runat="server" Width="215px" cssclass="input_btn_db" Text=" Transfer In Pending Items " OnCommand="btnPndItm_Click" CommandName="FundsIn" />
                            <br />
                        </div>
                        <br />
                        <div align=center>
                            <asp:Button ID="btnTIPrvCmt" runat="server" Width="215px" cssclass="input_btn_db" Text="Add Transfer In Comments " OnCommand="btnPrvCmt_Click" CommandName="FundsIn" />
                        </div>
                    </asp:Panel>
                </asp:Panel>
                <asp:SqlDataSource

                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>
</asp:panel>

#

Code Behind

#

Protected Sub btnPndItm_Click(ByVal sender As Object, ByVal e As CommandEventArgs) Handles btnPndItm.Command
    If Not e.CommandName = "" Then
        sdsPndItm.SelectParameters("TYPE").DefaultValue = CType(e.CommandName, String)
    Else
        sdsPndItm.SelectParameters("TYPE").DefaultValue = "Account"
    End If
    If Not e.CommandArgument = "" Then
        sdsPndItm.SelectParameters("SecondID").DefaultValue = CType(e.CommandArgument, Integer)
    Else
        sdsPndItm.SelectParameters("SecondID").DefaultValue = CType(Session("AcctID"), Integer)
    End If
    sdsPndItm.DataBind()
    Panel2.Visible = False
    pnlPndItm.Visible = True
    'If Session("GroupID") = 4 Then
        gvPndItm.Columns(0).Visible = True
    'Else
    '    gvPndItm.Columns(0).Visible = False
    'End If
End Sub

Protected Sub btnPrvCmt_Click(ByVal sender As Object, ByVal e As CommandEventArgs) Handles btnPrvCmt.Command
    If Not e.CommandName = "" Then
        SqlDataSource5.SelectParameters("TYPE").DefaultValue = CType(e.CommandName, String)
        Session("PrvCmtType") = CType(e.CommandName, String)
    Else
        SqlDataSource5.SelectParameters("TYPE").DefaultValue = "Account"
        Session("PrvCmtType") = "Account"
    End If
    If Not e.CommandArgument = "" Then
        Session("SecondID") = CType(e.CommandArgument, Integer)
    Else
        Session("SecondID") = CType(Session("AcctID"), Integer)
    End If
    SqlDataSource5.DataBind()
    Panel2.Visible = False
    pnlPrvCmt.Visible = True
End Sub

Answer 6

Your update panel is sitting inside the other panels.

Should that be the other way around? AFAIK only controls within the update panel will get updated in via the AJAX call.

Answer 7

Ok, so I posted an example of the code. If I'm not using updatepanels, the buttons work as they ought to. And, I reiterate, when breakpoints are set on the button click handling code, the sub does execute. It's just that Panel2 stays visible as if the browser never received a rerendered page. If you were to look at the value of visible for the two panels they would contain the expected values, the page just doesn't change.

Answer 8

I think your problem is that only the update panel is receiving data from the server after the method executes. The panel your are trying to change is outside of the update panel so it does not know that its properties have changed.

You either need to do a full page postback or have the panel you wish to modify inside the update panel.

Answer 9

SO should there be one updatepanel overarching the entire page? Instead of multiple updatepanels around various gridviews on the page. Okay so let me try more details. I've got panel A and Panel B of which only one or the other should be viewable at a time. Panel B contains the "modal popup" activity I want to perform when a button on Panel A is clicked. Panel A is has sub panels C, D, and E. These are AjaxToolKit collapsible panels that can be visible (as long as A is visible) by themselves or in combinations. There are updatepanels on each of C,D, and E to handle update buttons and so forth. There is a button control on each of C,D and E that when clicked will switch from panel A to panel B. Something is done on panel B and when finished, a click switches back to panel A. In order for the "B" button to work on C, D and E, it must be within their individual updatepanels. Now I may have tried making one overall updatepanel around panels A and B. But I think that didn't work so I ended up with the updatepanels within each od C, D and E. THe "B" button ONLY switches when it is clicked twice.

I'm hoping Mike can find what he referenced.

Answer 10

Mike, Is there a way to force the full page postback from within the updatepanel?

Answer 11

Here's a fairly simple solution. (I was having the same problem this morning.)

The UpdatePanel can't render stuff outside itself. So, as you noticed, the updates are happening, but you're not seeing the result.

The easiest solution is to force a full postback. You can do that like this:

protected override void OnInit(EventArgs e)
{
    var scriptManager = ScriptManager.GetCurrent(this);
    // or this.Page in a UserControl, etc.

    scriptManager.RegisterPostBackControl(someButton);
    scriptManager.RegisterPostBackControl(someOtherButton);
    // etc. for each control that needs to update something outside the UpdatePanel
}

This still allows the buttons themselves to be updated in the UpdatePanel by Ajax (e.g. changing their state to disabled or enabled). The full postback only happens if the buttons are clicked.

Answer 12

Like others have said an update panel only updates its contents, thats one of the main benefits of using it.

Panel2 and pnlPrvCmt need to be inside your update panel for your button click method to work. Another option would be to put Panel2 inside one update panel and pnlPrvCmt inside a second update panel. Then any control inside either update panel will cause both to refresh, as long as the UpdateMode=Always (which it is by default).

Answer 13

we an update panel and in it we have a grid view. in grid view we have check box and file uploader. when we click check box then visibility of file uploader will be true. but when we click on upload button then we never found value of fileuploader in aspx.cs page. please help me

thanx in advance