在同一视图中访问MVC下拉选定值

Question

我在Razor视图中有一个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

处理视图上客户端事件元件（S），的可视性show或hide方法时使用jQuery。这里有一个例子：

<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，如果Razor内部的语句在执行回调或回发的视图时工作，因此只会在ajax函数或表单提交后更改可视性。

欢迎任何建议和改进。

参考文献：

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

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