단일 라디오 버튼을 선택하여 그룹/라디오 버튼을 선택하는 가장 좋은 방법은 무엇입니까?

Question

나는 뭔가가 포함되어 있는지 그리고 이유를 제시하지 않는지 묻는 양식을 가지고있다.

그래서 나는 RadioButtonFor로 설정 한 정상적인 값으로 데이터베이스에 기록하는 라디오 버튼이 필요하고 "아니오"(false)가 선택되면 다른 라디오 버튼의 그룹/목록이 표시됩니다.

왜냐하면이 방법이 실현 가능하지 않다면 이상적인 해결책이 될 수 있습니다. 다른 해결책은 컨트롤러의 if 문을 사용하여 주 라디오 버튼의 값이 "예"(참)이면 양식을 데이터베이스에 기록 할 때 x, y 및 z 라디오 버튼의 값을 "아니오"(false)로 설정하십시오.

이들은 두 가지 아이디어가 있는데, 같은 결과를 얻는 방법에 관한 두 가지 아이디어가 있지만 첫 번째 아이디어에서는 기능을 수행하는 가장 쉬운 방법은 jquery에있을 것이라고 생각합니다. 그것을하는 방법과 함께

제 2의 아이디어를 위해 그것은 이상적이지 않습니다. 그리고 2 나는 그 라디오 버튼을 어떻게 참조 할 것인가/if 명령문이 말한 작업을 할 것인지를 확신하지 못합니다.

다른 아이디어도 환영 할 만하지만 구현 방법에 대한 도움을 받으시기 바랍니다.

Answer 1

글쎄, 내가 컨트롤러를 얻는 가장 간단한 방법을 알아 냈습니다. if (wd.AppTher == true) { wd.AppTherRea = 0; } 이것은 드롭 다운과 다른 라디오 버튼을위한 예제입니다. 그것은 "0"대신 또는 "false"가되도록 드롭 다운을 원하는 값이나 db 필드 유형에서 int로 여러 옵션을 원한다면 N/A 또는 W/e 값도 =로, 다중 RB 또는 DDL에 대해서는 {와} 사이에 더 많이 추가하고, wd는 테이블을 나타 내기 위해 할당 된 값이었고, 그렇지 않으면 뷰 모델 값을 사용할 수있었습니다.

Answer 2

나는 첫 번째 해결책을 찾아야 할 것입니다. 페이지의 두 라디오 버튼 그룹을 모두 렌더링하지만 CSS를 사용하여 두 번째 그룹을 숨 깁니다. 그런 다음 첫 번째 그룹의 라디오 버튼에 onclick 이벤트를 설정하여 클릭 한 그룹에 따라 두 번째 그룹을 표시하거나 숨 깁니다.

당신이 쓰고있는 onclick 핸들러 때문에 라디오 버튼을위한 html을 작성하는 것이 더 쉽다고 생각하지만 RadioButtonFor를 사용하여 관리 할 수 ​​있습니다.

그래서 예는/더 같이하지 않을 것이다 다음 경우

액션 방법에

<div id='otherOptions' <%: Model.YesNo ? "style='display: none;'" : "" %>> 
    <input type="radio" name="XYesNo" id="xyes" value='true'/><label for='xyes'>X Yes</label> 
    <input type="radio" name="XYesNo" id="xno" value='false'/><label for='xno'>X No</label> 
    <input type="radio" name="YYesNo" id="yyes" value='true'/><label for='yyes'>Y Yes</label> 
    <input type="radio" name="YYesNo" id="yno" value='false'/><label for='yno'>Y No</label> 
    <input type="radio" name="ZYesNo" id="zyes" value='true'/><label for='zyes'>Z Yes</label> 
    <input type="radio" name="ZYesNo" id="zno" value='false'/><label for='zno'>Z No</label> 
</div> 

어떤 X, Y, Z 값을 무시 :

<input type="radio" name="yesNo" id="yes" onlclick="$('#other-options').hide();' value='true' <%: Model.YesNo ? "checked='checked'" : "" %>/><label for='yes'>Yes</label> 
<input type="radio" name="yesNo" id="no" onlclick="$('#other-options').show();' value='false'<%: !Model.YesNo ? "checked='checked'" : "" %>/><label for='no'>No</label> 

귀하의 다른 옵션과 같을 것이다 첫 번째 예 아니요 사실이었다

if(model.YesNo){ 
    //persist false values for x,y,z 
} else { 
    //check model for values of x,y,z 
} 

Answer 3

음,이 과잉 들릴지 모르지만, 나는 B로 갈 것 oth 솔루션. 프리젠 테이션 관점에서 자바 스크립트 스크립트 코드를 올바르게 작성하려면 서버 코드가 필요하다.

클라이언트 측 유효성 검사 만 구현하는 경우 브라우저에 javascript가 지원되지 않거나 방금 비활성화 된 경우 시스템이 어떻게 작동할까요? 당연히 당신은

OTOH, 당신은 당신이 클라이언트 측 기능을 얘기하고 있다는 추가 한 경우 ...

을 최고의 사용자 경험을 제공하는 방법과 당신의 의심에 대한 것입니다 ... 자바 스크립트 지원을받을 수 없어 ASP.NET MVC에서는 서버 측 유효성 검사를 쉽게 수행 할 수 있습니다.로드시 게시 중에 읽은 것과 동일한 ViewData 항목/ViewModel 속성 만 설정하면됩니다.

그럼 전체 솔루션에 대해 이야기 해 보겠습니다.

다시 말해서 내가 필요한 것을 이해했는지 확실하지 않습니다. 당신은 라디오 버튼에 대해서 이야기하고 있습니다, 그러나 당신은 또한 당신이 그것들을 개별적으로 제어 할 수 있다고 생각하는 것 같습니다 (많은 라디오는 많은 분야에 묶여 있습니다). 일반적으로 그렇지 않습니다. 라디오 버튼 그룹은 일반적으로 동일한 필드에 바인딩되며, 각 라디오 버튼은 다른 값을 의미합니다 (단일 드롭 다운 목록과 동일 함). 기본 값으로, 이것은 하나의 컨트롤러 매개 변수 favColor에 바인딩됩니다

<% using(Html.BeginForm("HandleForm", "Home")) { %> 
    Select your favorite color:<br /> 
    <%= Html.RadioButton("favColor", "Blue", true, new { id = "rbColorBlue", class = "favColor" }) %> Blue <br /> 
    <%= Html.RadioButton("favColor", "Purple", false, new { id = "rbColorPurple", class = "favColor" })%> Purple <br /> 
    <%= Html.RadioButton("favColor", "Red", false, new { id = "rbColorRed", class = "favColor" })%> Red <br /> 
    <%= Html.RadioButton("favColor", "Orange", false, new { id = "rbColorOrange", class = "favColor" })%> Orange <br /> 
    <%= Html.RadioButton("favColor", "Yellow", false, new { id = "rbColorYellow", class = "favColor" })%> Yellow <br /> 
    <%= Html.RadioButton("favColor", "Brown", false, new { id = "rbColorBrown", class = "favColor" })%> Brown <br /> 
    <%= Html.RadioButton("favColor", "Green", false, new { id = "rbColorGreen", class = "favColor" })%> Green 
    <%= Html.RadioButton("favColor", "Other", false, new { id = "rbColorOther", class = "favColor" })%> Other 
    <div id="divOtherColorText" style="display: block"> 
     Describe the color you want here:<br /> 
     <%=Html.TextArea("otherColorText", new { id = "taOtherColor" }) %><br /> 
    </div> 
<% } %> 

: 물론, 같은 방식으로 행동해야합니다 데이터베이스를 의미하지...

이 예제를 참조하십시오 않습니다 "파란색". 편의상, 우리는 각 라디오 버튼 (rbColorBlue, rbColorGreen 등등)에 대해 다른 클라이언트 측 ID를 할당하고 있음을 확인하십시오. 즉, 서버 측 컨트롤러에 단일 값을 나타내는 경우 라하더라도 jQuery 코드에서 각 라디오 버튼을 개별적으로 처리 할 수 ​​있습니다. 서버 측 코드에 대해 이야기

, 즉 작업이 모양을하는 방법은 다음과 같습니다

public class HomeController : Controller 
{ 
    public ActionResult HandleForm(string favColor, string otherColorText) 
    { 
     // Add action logic here 
     // If you want to have a separated field for your database, 
     // just do something like that: 
     MyDbFacade.BlueColorField = (favColor == "Blue"); 
     MyDbFacade.GreenColorField = (favColor == "Green"); 
     ... 

     return View(); 
    } 

} 

(물론, 당신은 또한 뷰 모델과 함께 일할 수있는,하지만 난 여기에 해당 옵션에 대해 얘기하지 것이다.)

위로 클라이언트 쪽. 사용자가 rbColorOther 라디오 버튼을 선택하지 않는 한 taOtherColor을 표시하지 않으려한다고 가정 해 보겠습니다. jQuery 코드는 다음과 같습니다.

$(document).ready(function() { 
    // If user selects any radiobutton: 
    if ($('#rbColorOther:checked').length > 0) { 
     $("#divOtherColorText").show(); 
    } else { 
     $("#divOtherColorText").hide(); 
    } 
}); 

나는 그렇게 생각합니다. 내가 뭔가를 놓쳤다면 알려주세요. :-)