AJAX.NET and ListBoxes

Question

I have an UpdatePanel with two ListBoxes in them. What I want to happen is that when the page loads the first ListBox fills with some data. When the user selects and item the second ListBox should be populated with the pertinent data.

Here is what happens, the first ListBox is filled with data, the user selects an item and the SelectedIndexChanged event fires, but the selection gets cleared before method can see which item was selected?

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
    <table class="listBoxTable">
     <thead>
      <tr>
       <th>
        Please select a magazine to add articles to.</th>
      </tr>
     </thead>
     <tr>
      <td>     
       <asp:ListBox ID="lbMagazines" runat="server" Height="300px" Width="250px" 
        onselectedindexchanged="lbMagazines_SelectedIndexChanged" DataTextField="Title" 
        DataValueField="Id" AutoPostBack="True">

       </asp:ListBox>
      </td>
      <td>     
       <asp:ListBox ID="lbIssues" runat="server" Height="300px" Width="250px" 
        Enabled="False" DataTextField="Title" DataValueField="Id">

       </asp:ListBox>
      </td>
     </tr>
    </table>
</ContentTemplate>
</asp:UpdatePanel>

Answer 1

Based on the information provided, my initial thoughts are that you are repopulating lbMagazines on page load, so that by the time it gets to the event, the selecteditem/index is cleared.

Answer 2

If only the second listbox's contents needs to change then it would be more appropriate to put the first listbox outside the UpdatePanel and use triggers property:

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="lbMagazines" EventName="OnSelectedIndexChanged" />
</Triggers>

This way only the second listbox will be updated when you perform your AJAX postback.

Answer 3

Sounds like your initial list binding code isn't wrapped in a Page.IsPostBack.

If (!Page.IsPostBack)
{
    //List bind code
}

When that's the case the original list will keep rebinding like you're seeing.