同じビューのMVCドロップダウン選択値

Question

私は、Razor ViewにDropDownListとTextAreaを持っています。ドロップダウン内の特定の値が選択されている場合にのみ、TextAreaが表示されるようにします。それにはどんな解決策がありますか？これまで私が試したことはありますが、Security型の値が設定されていると仮定しているため、正しくありません。

<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とTextAreaForのid属性を想定して、ニーズに応じて、モデルバインディング名とまったく同じです。

AFAIKは、コールバックまたはポストバックを実行するビューが、ajax関数またはフォーム送信後に可視性のみを変更する場合に、Razor内部のif文が機能するようにします。

すべての提案と改善を歓迎します。

参考文献：

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

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