Html.DropDownListFor Rendre visible/non visible

Question

J'utilise l'assistant html pour un menu déroulant (Html.DropDownFor (...)) dans un projet MVC 3.

Lors du chargement de la page, je veux que ce menu déroulant ne soit pas visible. Il deviendra visible en fonction du choix d'un autre menu déroulant sur la même page. J'ai écrit un peu de JQuery pour gérer ceci qui utilise show() et hide(). Cela fonctionne pour les zones de texte et les étiquettes, mais ce dont j'ai besoin est la syntaxe correcte pour l'assistant lui-même. J'ai essayé:

<%:Html.DropDownListFor(a => Model.VariableOptionId, new { style = "display: none;" })%> 
<%:Html.DropDownListFor(a => Model.VariableOptionId, Visible = false })%> 

Quelle est la syntaxe correcte?

Answer 1

Vous pouvez simplement ajouter une classe, par exemple .dropdown et utiliser $ ('. Dropdown'). Toggle(); pour basculer la visibilité.

La syntaxe MVC Helper serait:

<%:Html.DropDownListFor(a => Model.VariableOptionId, new { @class = "dropdown" }) %> 

Un petit exemple de code serait:

HTML

<div class="toggle">Click me to toggle!</div> 
<br> 
<div> 
    <select class="dropdown"> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
    </select> 
</div> 

JS/Jquery

$(document).delegate('.toggle', 'click', function() { 
    $('.dropdown').toggle(); 
}); 

Exemple de travail: http://jsfiddle.net/8AKww/

exemple Edité: http://jsfiddle.net/8AKww/1/

Answer 2

@model MvcApplication1.Models.ProductViewModel 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 


     @using (Html.BeginForm()) 
     {  
     @Html.DropDownListFor(x => x.SelectedMainCatId, new SelectList(Model.MainCategory,"Value","Text"), "Select Main..") 
      @Html.DropDownListFor(x => x.SelectedSubCatId, new SelectList(Model.SubCategory, "Value", "Text"), "Select Sub..")  
     <button type="submit">Save</button> 
     } 
     <script type="text/javascript"> 
     $(function() { 
      $("#SelectedMainCatId").change(function() { 
       var val = $(this).val(); 
       if(val == 'anycondition') 
       { 
         $("#SubCategory").hide(); 
       } 
       else 
         $("#SubCategory").show(); 
      }); 
     }); 
    </script>