동일한보기에서 MVC 드롭 다운 선택한 값으로

Question

면도기 뷰에 DropDownList 및 TextArea가 있습니다. 드롭 다운의 특정 값을 선택한 경우에만 TextArea를 표시해야합니다. 그 해결책은 무엇입니까? 지금까지 시도한 것은 있지만 보안 유형의 값이 설정되어 있다고 가정하기 때문에 적절하지 않습니다.

<tr> 
    <td style="width: 200px; height: 30px"> 
     @Html.LabelFor(model => model.SecurityTypeId) 
    </td> 
    <td style="width: 400px; height: 30px"> 
     @Html.DropDownListFor(model => model.SecurityTypeId, Model.SecurityTypes, dropdownHtmlAttrs) 
    </td> 
    <td>&nbsp;</td> 
</tr> 
<tr> 
    @if (Model.SecurityTypeId == (int)(SecurityType.Other)) 
    { 
     <td style="width: 200px; height: 30px"> 
      @Html.LabelFor(model => model.Details) 
     </td> 
     <td style="width: 400px; height: 30px"> 
      @Html.TextAreaFor(model => model.Details, new { Style = "width:240px" }) 
     </td> 
     <td>&nbsp;</td> 
    } 
</tr> 

Answer 1

jQuery를 사용하거나 showhide 방법으로 클라이언트 측 이벤트에 뷰 구성 요소 (들)의 공개를 운반.

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#SecurityTypeId').change(function() { 
      var value = $(this).val(); // get selected value 
      if (value == "set") { // this condition may adjusted to certain preset value 
       $('#Details').show(); // show text area 
      } 
      else { 
       $('#Details').hide(); // hide text area 
      } 
    }); 
}); 
</script> 

당신은 바닐라 JS를 사용하여 선호하는 경우 : 위의

<script type="text/javascript"> 
    var ddlvalue = document.getElementById("SecurityTypeId").value; 
    if (ddlvalue == "set") { 
     document.getElementById("Details")).style.visibility = "visible"; 
    } 
    else { 
     document.getElementById("Details")).style.visibility = "hidden"; 
    } 
</script> 

그 스크립트 DropDownListFor의 id 속성을 가정 TextAreaFor 사용자의 요구에 따라 모델 바인딩 이름과 정확히 동일한 여기에 예입니다.

AFAIK, 콜백 또는 포스트 백을 수행하는 뷰가 Ajax 함수 또는 양식 제출 후 가시성 만 변경하면 AFAIK, if Razor 문이 작동합니다.

모든 제안과 개선을 환영합니다.

참고 : 당신이 클라이언트 측 이벤트에 응답 할 경우

how to hide and show text box according to select value using jquery

Show/hide control based on dropdown selection mvc 4 razor c#