在ASP.NET中有条件地显示/隐藏html区域

时间:2013-12-02 23:40:56

标签: c# asp.net events conditional

我需要使用C#显示和隐藏我的ASP.NET页面的不同区域。 当用户单击第一个单选按钮时,我希望我的ASP.NET html显示第一个段落并隐藏第二个段落,当用户单击第二个单选按钮时,我希望我的ASP.NET html显示第二个段落。

这是我的HTML代码。


<form id="form1" runat="server">
<div>

    <br />
    <asp:RadioButtonList ID="RadioButtonList1" runat="server">
        <asp:ListItem Value="P1">Show First Paragraph</asp:ListItem>
        <asp:ListItem Value="P2">Show Second Paragraph</asp:ListItem>
    </asp:RadioButtonList>


    <br />
    This is my 1st Paragraph.<br />
    <br />


    <br />
    This is my 2nd Paragraph.<br />
    <br />        

</div>
</form>

因此,当用户单击标有“显示第一段”的第一个单选按钮时,我希望我的页面显示带有“这是我的第一段”的文本的第一段。并用文本“这是我的第二段”隐藏第二段,反之亦然。

有人能告诉我正确的C#事件代码吗?

1 个答案:

答案 0 :(得分:1)

首先添加OnSelectedIndexChanged事件并将其设置为AutoPostBack,以便在选择单选按钮时,它会回发到服务器。然后将你的段落放在Panels或literals中。

ASP.NET:

<asp:RadioButtonList ID="RadioButtonList1" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="true" runat="server">
    <asp:ListItem Value="P1">Show First Paragraph</asp:ListItem>
    <asp:ListItem Value="P2">Show Second Paragraph</asp:ListItem>
</asp:RadioButtonList>

<br />
<asp:Panel ID="Panel1" Visible="false" runat="server">
This is my 1st Paragraph.<br />
</asp:Panel>


<asp:Panel ID="Panel2" Visible="false" runat="server">
This is my 2nd Paragraph.<br />
</asp:Panel>

然后在您的代码中,您编写名为:

的事件
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
    Panel1.Visible = Panel2.Visible = false;
    if (RadioButtonList1.SelectedValue == "P1")
        Panel1.Visible = true;
    else if (RadioButtonList1.SelectedValue == "P2")
        Panel2.Visible = true;
}