DropdownList en cascade pour Asp.Net MVC avec Razor

Question

J'essaie d'avoir une paire de listes déroulantes en cascade qui affiner une liste de villes en fonction d'un état sélectionné. Jusqu'à présent, j'ai ceci: Voir:

<div class="form-group"> 
      @Html.LabelFor(model => model.CollLocation, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       <div class="col-md-6"> 
        @Html.DropDownList("stateCol", null, htmlAttributes: new { @class = "form-control" }, optionLabel: "Select a state") 
        @Html.ValidationMessageFor(model => model.CollLocation, "", new { @class = "text-danger" }) 
       </div> 
       <div class="col-md-6"> 
        @Html.DropDownList("CollLocation", null, htmlAttributes: new { @class = "form-control" }, optionLabel: "Select a city") 
        @Html.ValidationMessageFor(model => model.CollLocation, "", new { @class = "text-danger" }) 
       </div> 

Et ce contrôleur:

// GET: Coll/Create 
public ActionResult Create() 
{ 
    var stateColl = db.ZipCodes.OrderBy(c => c.state).Select(c => c.state).Distinct(); 

    var cityCol = db.ZipCodes.Select(C => C.primary_city).Distinct(); 

    ViewBag.stateCol = new SelectList(stateColl); 
    ViewBag.ArRecID = new SelectList(db.ArRecs, "ArRecID", "ArZipID"); 
    ViewBag.CollLocation = new SelectList(cityCol); 
    return View(); 
} 

// POST: Coll/Create 

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Create([Bind(Include = "CollID,ArRecID,CollName,CollDescr,CollValue,CollOwner,CollLocation,DateCreated,ModBy,ModDate,CreatedBy")] Collateral collateral) 
{ 
    if (ModelState.IsValid) 
    { 
     db.Coll.Add(coll); 
     db.SaveChanges(); 
     return RedirectToAction("Index"); 
    } 

    ViewBag.ArRecID = new SelectList(db.ArRecs, "ArRecID", "ArZipID", coll.ArRecID); 
    ViewBag.CollLocation = new SelectList(db.ZipCodes, "zip", "primary_city", coll.CollLocation).Distinct(); 
    return View(collateral); 
} 

Dans mon modèle ZipCodes je zip, primary_city et état. Dans le CollLocation, je veux être en mesure de voir uniquement les cités qui sont dans l'état sélectionné dans la liste déroulante stateCol. Les deux dérouleurs fonctionnent pour moi, mais ils ne travaillent pas ensemble. J'ai essayé d'autres tutoriels et réponses, mais ils ne m'ont laissé que me gratter la tête encore plus. Toute aide est la bienvenue.

Answer 1

Vous devrez effectuer une requête Ajax à chaque fois que vous modifiez votre liste déroulante État. Ainsi, lorsque la liste déroulante État a changé, une fonction JavaScript devrait faire une demande Ajax à votre contrôleur pour interroger le code postal que vous voulez.

Vous pouvez télécharger mon projet Github et regarder 2 fichiers "\ Views \ ClientOrder \ Create.cshtml" et "\ RiceStoreScripts \ ClientOrder.js"

hongyichao/MVCRiceStore