MVC Dependent List, die mit dem Modell verknüpft ist (nicht mit der statischen Liste)

Question

Ich habe ein Problem damit, dass eine abhängige Liste beim Verbinden mit dem MVC-Modell funktioniert. In den anderen Antworten online verwenden sie statische Listen demonstrieren (die ich zur Arbeit bekommen kann), aber mir fehlt dieser letzte Schritt, um mit meinen realen Daten zu verknüpfen. Wenn ich den Code unten mache, passiert nichts.

Ich vermute, es ist eine einfache Zeile, die ich brauche in der Javascript-Teil, den ich verwende, um die Liste zu setzen (rechts unter der "WORKS SO FAR" -Alert). Oder es scheint, dass es einen Weg geben sollte, die Dropdownliste für meine neue Auswahlliste nur zu aktualisieren (anstatt jede der Methoden einzeln zu verwenden).

Controller:

public class EMPLOYEEsController : Controller 
{ 
private ApplicationDbContext db = new ApplicationDbContext(); 
public ActionResult Create() 
{ 
    ViewBag.STATEID = new SelectList(db.STATEs, "STATEID", "STATENAME"); 
    ViewBag.CITYID = new SelectList(db.CITYs, "CITYID", "CITYNAME"); 
    return View(); 
} 

    [HttpGet] 
    public ActionResult UpdateCity(string id) 
    { 
     SelectList CityList = new SelectList(db.CITYs.Where(x => x.STATEID.Equals(id)), "CITYID", "CITYNAME"); 
     return Json(CityList, JsonRequestBehavior.AllowGet); 
    } 
} 

Ausblick:

@model myproj.Models.EMPLOYEE 

@{ 
ViewBag.Title = "Create"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Create</h2> 

@using (Html.BeginForm()) 
{ 
@Html.AntiForgeryToken() 

<script type="text/javascript" src="/scripts/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#STATEID').change(function() { 
      $.ajax({ 
       url: '@Url.Action("UpdateCity")', 
       type: 'GET', 
       dataType: 'json', 
       cache: false, 
       data: { id: $(this).val() }, 
       success: function (CityList) { 
        alert('WORKS SO FAR'); 
        var citySelect = $('#CITYID'); 
        citySelect.empty(); 
        $.each(CityList, function (index, locations) { 
         citySelect.append(
          $('<option/>') 
           .attr('value', CityList.CITYID) 
           .text(CityList.CITYNAME) 
          ); 
        }); 
       }, 
       error: function() { alert('ERROR'); } 
      }); 
     }); 
    }); 
</script> 

<div class="form-horizontal"> 
<h4>EMPLOYEE</h4> 
<hr /> 
@Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
<div class="form-group"> 
    @Html.LabelFor(model => model.EMPLOYEENAME, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.EditorFor(model => model.EMPLOYEENAME, new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.EMPLOYEENAME, "", new { @class = "text-danger" }) 
    </div> 
</div> 

<div class="form-group"> 
    @Html.LabelFor(model => model.STATEID, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.DropDownListFor(model => model.STATEID, (IEnumerable<SelectListItem>)ViewBag.STATEs, "Select State", new { @class = "form-control" }) 
     @Html.ValidationMessageFor(model => model.STATEID, "", new { @class = "text-danger" }) 
    </div> 
</div> 

<div class="form-group"> 
    @Html.LabelFor(model => model.CITYID, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.DropDownListFor(model => model.CITYID, (IEnumerable<SelectListItem>)ViewBag.CITYs, "Select City", new { @class = "form-control" }) 
     @Html.ValidationMessageFor(model => model.CITYID, "", new { @class = "text-danger" }) 
    </div> 
</div> 

<div class="form-group"> 
    <div class="col-md-offset-2 col-md-10"> 
     <input type="submit" value="Create" class="btn btn-default" /> 
    </div> 
</div> 
</div> 
} 

<div> 
@Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 
@Scripts.Render("~/bundles/jqueryval") 
} 

Answer 1

CityList ist die Liste der Städte. Sie versuchen jedoch, die CityList.CityID zu erhalten. Was Sie wollen, ist die CityId und CityName der aktuellen Stadt, die $.each als zweiter Parameter im Rückruf bietet.

Sie sollten in der Lage sein, es zu bekommen:

    $.each(CityList, function (index, locationSelectItem) { 
         citySelect.append(
          $('<option/>') 
           .attr('value', locationSelectItem.Text) 
           .text(locationSelectItem.Value) 
          ); 
        }); 

Während es Sinn macht StateID zu haben und CityID Select werden, da sie von der Ansicht verwendet wird, sollten Sie Ihre UpdateCity ändern, um eine Liste

zurückzukehren