update panel not working

Question

i am having two list box which perform add remove item functionality which are controlled by four buttons and o each button click there happen to be post back but i don't want it to be flicker for which i am using update panel like this but it still made post back wats wrong with this explain me this

<asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click"  Width="50px"/><br />
        <asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click" Width="50px"/><br />
        <asp:Button ID="ButtonAddAll" runat="server" Text =">>>" OnClick="ButtonAddAll_Click" Width="50px"/><br />    
        <asp:Button ID="ButtonRemoveAll" runat="server" Text ="<<<" OnClick="ButtonRemoveAll_Click" Width="50px"/>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

I wrote a quick example that does work. You do not need your buttons in the UpdatePanel. You only need the ListBox since they are the only controls being refresh. Setup the Trigger for the UpdatePanel will cause the refreshes to occur without the 'flicker'.

aspx code:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
    <asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click"  Width="50px"/><br /> 
    <asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click" Width="50px"/><br /> 
    <asp:Button ID="ButtonAddAll" runat="server" Text =">>>" OnClick="ButtonAddAll_Click" Width="50px"/><br />     
    <asp:Button ID="ButtonRemoveAll" runat="server" Text ="<<<" OnClick="ButtonRemoveAll_Click" Width="50px"/>     
    <asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ButtonAdd" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="ButtonRemove" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="ButtonAddAll" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="ButtonRemoveAll" EventName="Click" />
        </Triggers>
        <ContentTemplate>
            <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
            &nbsp;&nbsp;
            <asp:ListBox ID="ListBox2" runat="server"></asp:ListBox>
        </ContentTemplate> 
    </asp:UpdatePanel>
</div>

cs (codebehind) code:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        ListBox1.Items.Add(new ListItem("Test1", "1"));
        ListBox1.Items.Add(new ListItem("Test2", "2"));
        ListBox1.Items.Add(new ListItem("Test3", "3"));
        ListBox1.Items.Add(new ListItem("Test4", "4"));
        ListBox1.Items.Add(new ListItem("Test5", "5"));
    }
}

protected void ButtonRemove_Click(object sender, EventArgs e)
{
    if (ListBox2.SelectedItem != null)
    {
        ListBox1.Items.Add(ListBox2.SelectedItem);
        ListBox2.Items.RemoveAt(ListBox2.SelectedIndex);
        ListBox2.ClearSelection();
        ListBox1.ClearSelection();
    }
}

protected void ButtonAdd_Click(object sender, EventArgs e)
{
    if (ListBox1.SelectedItem != null)
    {
        ListBox2.Items.Add(ListBox1.SelectedItem);
        ListBox1.Items.RemoveAt(ListBox1.SelectedIndex);
        ListBox1.ClearSelection();
        ListBox2.ClearSelection();
    }
}

I have tested this and it does work. I only implemented 2 of the Buttons to present a complete example.