ASP.NET update panel doesn't update until second click

Question

I've looked for answers online but there are so many that I've tried that haven't worked. I have two buttons on the page a "like" and a "dislike" button.

When I click on a button the updatepanel doesn't update but the like data for that user is inserted into the database.

When I click on the button the second time the update panel gets refreshed and works for proceeding clicks. I want the update panel to refresh on the first click

<form id="Matches" runat="server" class="form-horizontal">

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

        <asp:UpdatePanel ID="VotePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" >
            <ContentTemplate>

                <div class="row">
              <!-- left column -->
                    <div class="col-lg-12 col-sm-12 col-xs-12">
                        <div class="text-center">
                       ail" />
                            <h1>
                                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></h1>
                            <div class="btn-group">
                                <asp:Button ID="Button1" runat="server" CssClass="btn btn-default" Text="Like" OnClick="Button1_Click" /><asp:Button ID="Button2" CssClass="btn btn-default" runat="server" Text="Dislike" OnClick="Button2_Click" />
                            </div>
                        </div>
                    </div>
                </div>

            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />

                <asp:AsyncPostBackTrigger ControlID="Button2" />
                </Triggers>
        </asp:UpdatePanel>

C# Code

protected void Button1_Click(object sender, EventArgs e)
        {
            uservote.spAddLike(user.getId(), usermatch.getId());
            VotePanel.Update();

        }
        protected void Button2_Click(object sender, EventArgs e)
        {
            uservote.spAddDislike(user.getId(), usermatch.getId());
            VotePanel.Update();
        }

What happens if you set ChildenAsTriggers to true? Also what are you changing and how are you canging the contents of the update panel? Is there something in uservote.spAddLike? — Jon P
@JonP The same thing when I set ChildenAsTriggers to true. I have another stored procedure that gets another user. This is at the top of the Page_Load — user3922757
There is your problem. Page_load is called before click event. I'll elaborate in a an answer. — Jon P
@JasonW I think so. I followed a tutorial and they said to put it outside. — user3922757

Jon P Jon P · Accepted Answer · 2014-11-11T00:17:40

From comments in addtion to your question, you are calling an update function before you have updated the database. You need to get a better understanding of the page life-cycle.

You are getting a the updated info on page load, this happens before the on click. Try the following

 private void functionToUpdateFields(some arguements)
 {
      /*Call Database and populate form fields*/
 }


 protected void Page_Load(object sender, EventArgs e)
 {
     if (!isPostback)
     {
         functionToUpdateFields(some arguements);
     }
 }

 protected void Button1_Click(object sender, EventArgs e)
 {
        uservote.spAddLike(user.getId(), usermatch.getId());
        functionToUpdateFields(some arguements);
        VotePanel.Update();
 }

 protected void Button2_Click(object sender, EventArgs e)
 {
       uservote.spAddDislike(user.getId(), usermatch.getId());
       functionToUpdateFields(some arguements);
       VotePanel.Update();
 }

When you have all this set up set break poins on each of the event handlers and note the order in which they occur when you debug. This will give you a practical demonstration on the page life cycle.

ASP.NET update panel doesn't update until second click

1 Answers