Update Panel Button need to be pressed twice to update

Question

I have a List View inside an update panel, but I can't get it to update properly - each item has a button that removes it from the list - which it does but it takes two button presses to see the item disappear from the page.

Here the markup:

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

<asp:UpdatePanel ID="ToDoUpdate" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <asp:ListView ID="ToDo" runat="server">
         <ItemTemplate>
            <li style="" class="<%# Eval("ToDoPriority")%>">
               <%# Eval("ToDoText")%>
               <div class="agile-detail">
                  <asp:LinkButton ID="ToDoComplete" runat="server" CssClass="pull-right btn btn-xs btn-primary" Text="Done" OnClick="ToDoComplete_Click"></asp:LinkButton>
                  <i class="fa fa-clock-o"></i> <%# Eval("ToDoDate")%>
               </div>
            </li>
            <asp:HiddenField ID="HiddenToDoID" runat="server" Value='<%# Eval("ToDoId") %>' />
         </ItemTemplate>
      </asp:ListView>
   </ContentTemplate>
</asp:UpdatePanel>

And the Code Behind:

protected void ToDoComplete_Click(Object sender, EventArgs e)
   {
      LinkButton ToDoComplete = sender as LinkButton;
      HiddenField todo =     ToDoComplete.NamingContainer.FindControl("HiddenToDoID") as HiddenField;
      int TodDoId = Convert.ToInt32(todo.Value);

      DashboardController.UpdateToDo(TodDoId);

      GetToDoItems(1);

      ToDoUpdate.Update();
    }

Is there any way to do this by pressing the button once?

Answer 1

What you are missing is Triggers section in UpdatePanel. As your update panel as UpdateMode ="Conditional" you need to specify triggers. If you are using normal full postback then change AsyncPostBackTrigger to PostBackTrigger.

<asp:UpdatePanel ID="ToDoUpdate" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <asp:ListView ID="ToDo" runat="server">
            <li style="" class="<%# Eval("ToDoPriority")%>">
               <%# Eval("ToDoText")%>
               <div class="agile-detail">
                  <asp:LinkButton ID="ToDoComplete" runat="server" CssClass="pull-right btn btn-xs btn-primary" Text="Done" OnClick="ToDoComplete_Click"></asp:LinkButton>
                  <i class="fa fa-clock-o"></i> <%# Eval("ToDoDate")%>
               </div>
            </li>
            <asp:HiddenField ID="HiddenToDoID" runat="server" Value='<%# Eval("ToDoId") %>' />
         </ItemTemplate>
      </asp:ListView>
   </ContentTemplate>

<Triggers>
 <asp:AsyncPostBackTrigger ControlID="ToDo" EventName="Click" />
 </Triggers>
</asp:UpdatePanel>