AJAX ModalPopup update panel contents based on change in panel controls

Question

I have an AJAX Modal Popup panel that contains a RadioButtonList, 2 labels and 2 DropDowns. I want to update the Labels and DropDowns when a radio button is selected. My attempt at this posts back which causes the ajax popup to disappear.

aspx called on image click:

<asp:Panel ID="pnlModalContainer" runat="server">
    <asp:RadioButtonList ID="rblTest" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="rblTest_SelectedIndexChanged">
      <asp:ListItem Text="Test 1" Value="1" Selected="True" />
      <asp:ListItem Text="Test 2" Value="2" />
    </asp:RadioButtonList>
    <br />
    <asp:Label ID="lblFoo" Text="Foo" />
    <asp:Label ID="lblBar" Text="Bar" />
    <asp:DropDownList ID="ddlDogs" runat="server" DataSourceID="odsDogs" DataTextField="Dog" DataValueField="DogID" />
    <asp:DropDownList ID="ddlCats" runat="server" DataSourceID="odsCats" DataTextField="Cat" DataValueField="CatID" />
</asp:Panel>

Code Behind (vb.net):

Protected Sub rblTest_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles rblTest.SelectedIndexChanged
   ' ???
   ' Make it change lblFoo.Text and lblBar.Text as well as the DataSource for the DDLs
End Sub

Answer 1

You need to add an UpdatePanel within pnlModalContainer.