ASP.NET MVC 2 Filtrage de plusieurs listes déroulantes

Question

Je sais comment aborder ce problème, mais j'ai très peu d'expérience dans le domaine de l'Internet. La situation est la suivante: J'ai un contrôleur qui renvoie une vue avec un contrôle d'utilisateur dans celui-ci. Dans le contrôle de l'utilisateur j'ai 3 listes déroulantes; un pour les entreprises, un pour les bureaux extérieurs et un pour les installations. Lorsque les entreprises ddl sont modifiées, le bureau de terrain et les installations ddls devraient changer, et lorsque le bureau de terrain ddl est modifié, l'installation ddl devrait changer.

Index.aspx '<% @ Page Titre = "ManifestSearchPage" AutoEventWireup = "true" Language = "C#" MasterPageFile = "~/Vues/Shared/Site.master" Inherits = "System.Web.Mvc. ViewPage "%>

Manifest

<form id="form1" runat="server"> 

<% using (Html.BeginForm()) { %> 
    <fieldset> 
     <legend><h2>Find a Manifest</h2></legend> 
     <table> 
      <tr> 
       <td> 
        <img src="../../Content/magnify-large.jpg" width="111" height="111" align="middle"></img> 
       </td> 
       <td> 
        <% Html.RenderPartial("../Shared/EditorTemplates/ManifestSearch");%> 
       </td> 
      </tr> 
     </table> 
    </fieldset> 
<% 

}%>

<h2>Search Results</h2> 
<div id="resultspanel"> 
    <table> 
     <tr> 
     </tr> 
     <% foreach (var item in Model.SearchResults) { %> 
      <tr> 
      <td> 
       blargh 
      </td> 
      </tr> 
    <% } %> 
    </table> 
</div> 

</form> 

'

ManifestSearch.aspx ' <% @ Control Language = "C#" Inherits = "System.Web.Mvc.ViewUserControl" %>

<% using (Html.BeginForm()) {%> 
    <%: Html.ValidationSummary(true) %> 

    <fieldset> 
     <legend>Fields</legend> 
      <table> 
       <tr> 
        <td> 
         <%: Html.LabelFor(model => model.ManifestPartialId) %> 
         <%: Html.CheckBoxFor(model => model.SearchByManifestPartialId)%> 
         <%: Html.ValidationMessageFor(model => model.SearchByManifestPartialId) %> 
        </td> 
        <td> 
         <%: Html.LabelFor(model => model.CompanyId) %> 
         <%: Html.CheckBoxFor(model => model.SearchByCompanyId)%> 
         <%: Html.ValidationMessageFor(model => model.SearchByCompanyId) %> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <%: Html.TextBoxFor(model => model.ManifestPartialId) %> 
         <%: Html.ValidationMessageFor(model => model.ManifestPartialId) %> 
        </td> 
        <td> 
         <%: Html.DropDownList("CompanyId", new SelectList(ViewData["Companies"] as IEnumerable,"Id","CompanyName", Model.CompanyId))%> 
         <%: Html.ValidationMessageFor(model => model.CompanyId) %> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <%: Html.LabelFor(model => model.FieldOfficeId) %> 
         <%: Html.CheckBoxFor(model => model.SearchByFieldOfficeId)%> 
         <%: Html.ValidationMessageFor(model => model.SearchByFieldOfficeId) %> 
        </td> 
        <td> 
         <%: Html.LabelFor(model => model.FacilityId) %> 
         <%: Html.CheckBoxFor(model => model.SearchByFacilityId)%> 
         <%: Html.ValidationMessageFor(model => model.SearchByFacilityId) %> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <%: Html.DropDownList("FieldOfficeId", new SelectList(ViewData["FieldOffices"] as IEnumerable, "Id", "FacilityName", Model.FieldOfficeId))%> 
         <%: Html.ValidationMessageFor(model => model.FieldOfficeId) %> 
        </td> 
        <td> 
         <%: Html.DropDownList("FacilityId", new SelectList(ViewData["Facilities"] as IEnumerable, "Id", "FacilityName", Model.FacilityId))%> 
         <%: Html.ValidationMessageFor(model => model.FacilityId) %> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <%: Html.LabelFor(model => model.SearchByDateTime) %> 
         <%: Html.CheckBoxFor(model => model.SearchByDateTime) %> 
         <%: Html.ValidationMessageFor(model => model.SearchByDateTime) %> 
        </td> 
        <td> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <%: Html.LabelFor(model => model.FromDate) %> 
         <%: Html.TextBoxFor(model => model.FromDate) %> 
         <%: Html.ValidationMessageFor(model => model.FromDate) %> 
        </td> 
        <td> 
         <%: Html.LabelFor(model => model.ToDate) %> 
         <%: Html.TextBoxFor(model => model.ToDate) %> 
         <%: Html.ValidationMessageFor(model => model.ToDate) %> 
        </td> 
       </tr> 
       <tr> 
        <td> 
        </td> 
        <td> 
         <input type="submit" value="Search" /> 
        </td> 
       </tr> 
      </table> 
    </fieldset> 

<% } %> 

'

Tout cela fonctionne, à l'exception de mon exigence que mes listes déroulantes ne soient pas liées.

Je sais que je dois utiliser Javascript pour accomplir mon exigence des listes déroulantes liées mais je n'ai aucune idée comment l'approcher même. J'ai trouvé quelques tutoriels, mais aucun ne semble se rapporter à la façon dont j'ai mon code mis en place. Quelqu'un peut-il aider avec ceci?

Answer 1

Tout d'abord, pour toutes les personnes jQuery ici

Si vous utilisez jQuery, vous pouvez utiliser le changement de gestionnaire d'événements pour vous modifier les menus déroulants.

$('#firstSelect').change(function() { 
    // DO STUFF 
}); 

Si vous ne pas utiliser jQuery pourrait utiliser l'attribut onchange dans votre menu déroulant

<script type="text/javascript> 
function doStuffOnChange() { 
    // DO STUFF 
} 
</script> 

<select id="firstSelect" onchange="doStuffOnChange();"> 

Vous pouvez ajouter attributs HTML avec HTML Helpers en utilisant cette variante

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper, 
    string name, 
    IEnumerable<SelectListItem> selectList, 
    IDictionary<string, Object> htmlAttributes 
)