Как я могу привязать видимость панели к другому элементу управления?

Question

Итак, у меня есть две переключатели. Если выбран RadioButton1, я хочу, чтобы панель 1 была видимой, а панель 2 была скрыта. Если выбран RadioButton2, я хочу, чтобы панель 2 была видимой, а панель 1 была скрыта. Есть ли способ сделать это, не требуя обратной передачи?

Answer 1

Там по существу два способа сделать это: полностью на стороне клиента и на стороне сервера с асинхронным постбэка.

стороне клиента:

CSS:

.hidden { display: none; } 

Javascript:

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

} 

ASPX:

<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> 

Code-Behind:

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 

---

Серверное

ASPX:

<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> 

Code-Behind:

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 

Там же много других способов сделать это, такие как USIN g jQuery для клиентской стороны и с использованием бит менее жестко закодированной логики для серверной части.

Answer 2

Вы можете сделать это с помощью небольшого 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>