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

<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" />

        <asp:ListBox runat="server" ID="listBox"></asp:ListBox>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 2

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.

Answer 3

Add the asp:ListBox to the ContentTemplate of your asp:UpdatePanel, or add a new asp:UpdatePanel and add it to its ContentTemplate. The control won't be updated using an asynchronous postback if it's not placed within an asp:UpdatePanel.

With the following code snippets the newly added listBox will be updated with new content using an asynchronous postback:

Page.aspx:

<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" />

        <asp:ListBox runat="server" ID="listBox"></asp:ListBox>
    </ContentTemplate>
</asp:UpdatePanel>

Sample event handler in the code-behind file, Page.aspx.cs:

protected void ButtonAddAll_Click(object sender, EventArgs e)
{
    listBox.DataSource = new List<string>() { "Test" };
    listBox.DataBind(); 
}