Zugang MVC Drop-Down-Wert in der gleichen Ansicht ausgewählt

Question

Ich habe einen Dropdownlist und ein TextArea- in einer Razor Ansicht. Ich möchte, dass der TextArea nur dann sichtbar ist, wenn ein bestimmter Wert in der Dropdown-Liste ausgewählt wurde. Welche Lösung gibt es dafür? Hier ist, was ich bisher versucht habe, aber es ist nicht ganz richtig, weil es annimmt, dass der Wert des Sicherheitstyps gesetzt ist.

<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

Verwenden jQuery wenn Sichtelement (e) auf Client-seitigen Ereignisse mit show oder hide Verfahren Handhabung Sichtbarkeit. Hier ein Beispiel:

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

Wenn Sie Vanille JS lieber mit:

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

Diese Skripte oben nehmen id-Attribut von DropDownListFor und TextAreaFor sind genau die gleichen wie das Modell verbindlich Namen, je nach Ihren Bedürfnissen.

AFAIK, wenn Anweisung innerhalb Razor funktioniert, wenn eine Ansicht Rückruf oder Postbacks durchgeführt wird, also nur die Sichtbarkeit nach einer Ajax-Funktion oder ein Formular ändert.

Anregungen und Verbesserungen begrüßen.

Referenzen:

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

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