패널의 가시성을 다른 컨트롤에 연결하려면 어떻게해야합니까?

Question

그래서 두 개의 라디오 버튼이 있습니다. RadioButton1이 선택되면, Panel1을 보이게하고 Panel2를 숨기고 싶습니다. RadioButton2를 선택하면 Panel2를 표시하고 Panel1을 숨겨 둡니다. 다시 게시가 필요없이이 작업을 수행 할 수있는 방법이 있습니까?

Answer 1

기본적으로이 작업을 수행하는 두 가지 방법이있다.

클라이언트 측 :

CSS :

.hidden { display: none; } 

자바 스크립트 :

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> 

코드 숨김 :

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> 

코드 숨김 :

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 

같은 날기 등이 작업을 수행하는 여러 가지 방법이있다 g 클라이언트 측을위한 jQuery와 서버 측을 위해 좀 덜 하드 코딩 된 로직을 사용한다.

Answer 2

작은 자바 스크립트로이 작업을 수행 할 수 있습니다. 두 라디오 버튼에 온 클릭 핸들러를 추가하고보기를 업데이트하는 함수를 호출 비동기 포스트 백 완전히 클라이언트 측과 서버 측 :

이

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