1

同じグループ名のラジオ ボタンが 2 つあります。1つのラジオボタンを選択すると、2つの新しいラジオボタンが必要になり、他のラジオボタンを選択すると、他の2つの新しいラジオボタンが表示されるようになります。これらすべてを ModalPopupExtender 内に入れたい。

4

1 に答える 1

1

次に例を示します。

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>

コードビハインド:

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;
    }
}
于 2013-04-04T10:52:06.637 に答える