modalpopup extender in asp.net ajax

I have two radio buttons with the same groupname. On selection of the one radio button i want two new radio buttons,and on selection of other radio button i want two other new radio button to be visible. I want all of these inside the ModalPopupExtender.

Solution

Here's an example:

ASPX:

<head runat="server">
    <title>Modal Popup</title>
    <style type="text/css">
        .modalStyle
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }

        .panelStyle
        {
            width: 300px;
            height: 180px;
            border: 2px solid Gray;
            background-color:White;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="scripManager" runat="server" />
    <asp:ModalPopupExtender ID="modal" CancelControlID="btnCancel" BackgroundCssClass="modalStyle" PopupControlID="popup" TargetControlID="lblPopup" runat="server" />
    <asp:Label ID="lblPopup" runat="server" />
    <asp:Panel runat="server" ID="popup" CssClass="panelStyle">
        <table style="width: 100%;">
            <tr>
                <td>
                    <asp:RadioButton ID="rdboption1" AutoPostBack="true" OnCheckedChanged="CheckedChanged" runat="server" Text="Option 1" GroupName="Options" /><br />
                    <asp:RadioButton ID="rdboption11" runat="server" Text="Option 1.1" GroupName="SubOption1"
                        Visible="false" /><br />
                    <asp:RadioButton ID="rdboption12" runat="server" Text="Option 1.2" GroupName="SubOption1"
                        Visible="false" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RadioButton ID="rdboption2" AutoPostBack="true" OnCheckedChanged="CheckedChanged" runat="server" Text="Option 2" GroupName="Options" /><br />
                    <asp:RadioButton ID="rdboption21" runat="server" Text="Option 2.1" GroupName="SubOption2"
                        Visible="false" /><br />
                    <asp:RadioButton ID="rdboption22" runat="server" Text="Option 2.2" GroupName="SubOption2"
                        Visible="false" />
                </td>
            </tr>
            <tr>
                <td style="text-align: center;">
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                </td>
            </tr>
        </table>
    </asp:Panel>
    </form>
</body>

Code behind:

public partial class Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        modal.Show();
    }

    protected void CheckedChanged(object sender, EventArgs e)
    {
        var radioButton = sender as RadioButton;
        ResetOptions();
        switch(radioButton.ID)
        {
            case "rdboption1":
                rdboption11.Visible = true;
                rdboption12.Visible = true;
                break;
            case "rdboption2":
                rdboption21.Visible = true;
                rdboption22.Visible = true;
                break;
        }   
    }

    private void ResetOptions()
    {
        rdboption11.Visible = false;
        rdboption12.Visible = false;
        rdboption21.Visible = false;
        rdboption22.Visible = false;
    }
}