Asp.net 如何将窗格的可见性绑定到另一个控件？

所以我有两个单选按钮。如果选择RadioButton1，我希望Panel1可见，Panel2隐藏。如果选择RadioButton2，我希望Panel2可见，Panel1隐藏。有没有一种不需要回发就可以做到这一点的方法？

您可以使用一点javascript来实现这一点。向两个单选按钮添加onclick处理程序，并调用函数更新视图：

<input type="radio" id="radio_1" onclick="updateView">Radio 1
<input type="radio" id="radio_2" onclick="updateView">Radio 2

<script>
  function updateView() {
    var radio_1 = document.getElementById("radio_1");
    // etc... get radio 2 and panels the same way
    panel_1.style.display = radio_1.checked ? "block" : "none";
    panel_2.style.display = radio_2.checked ? "block" : "none";
  }
</script>

收音机1
第二台
函数updateView（）{
var radio_1=document.getElementById（“radio_1”）；
//等等…用同样的方法获得收音机2和面板
面板1.style.display=收音机1.checked？“块”：“无”；
面板2.style.display=收音机2.checked？“块”：“无”；
}

基本上有两种方法可以做到这一点：完全客户端和服务器端异步回发

客户端：

CSS:

Javascript:

toggleDiv = function(id, opt) {
    _id = document.getelementbyid(id);
    if (opt == "show") {
        _id.style.display = "block";
    } else {
        _id.style.display = "hidden";
    }

}

ASPX：

---

服务器端

ASPX：

还有很多其他方法可以做到这一点，比如在客户端使用jQuery，在服务器端使用较少的硬编码逻辑

toggleDiv = function(id, opt) {
    _id = document.getelementbyid(id);
    if (opt == "show") {
        _id.style.display = "block";
    } else {
        _id.style.display = "hidden";
    }

}

<asp:radiobutton id="rbOne" runat="server" />
<asp:radiobutton id="rbTwo" runat="server" />

<div id="panel1" class="hidden">
    <p>Panel 1</p>
</div>

<div id="panel2" class="hidden">
    <p>Panel 2</p>
</div>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ' Apply onclick handlers to the radio buttons
    If Not Page.IsPostBack Then
        rbOne.Attributes.Add("onclick", "toggleDiv('" & rbOne.ClientId() & "', 'show'); toggleDiv('" & rbTwo.ClientId & "', 'hide');")
        rbTwo.Attributes.Add("onclick", "toggleDiv('" & rbOne.ClientId() & "', 'hide'); toggleDiv('" & rbTwo.ClientId & "', 'show');")
    End If

End Sub

<asp:UpdatePanel id="upRadioButtons" runat="server">
    <asp:radiobutton id="rbOne" runat="server" autopostback="true" />
    <asp:radiobutton id="rbTwo" runat="server" autopostback="true" />

    <asp:multipage id="mvButtonPanels" runat="server">
        <asp:view id="view1" runat="server">
            <p>Panel 1</p>
        </asp:view>
        <asp:view id="view2" runat="server">
            <p>Panel 2</p>
        </asp:view>
    </asp:multipage>
</asp:UpdatePanel>

Protected Sub rbOne_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rbOne.CheckedChanged
    mvButtonPanels.ActiveViewIndex = 0
End Sub

Protected Sub rbTwo_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rbTwo.CheckedChanged
    mvButtonPanels.ActiveViewIndex = 1
End Sub