How can I populate a dropdownlist based on the selected value of another dropdownlist? MVC

Question

I am currently trying to populate the values for a car's model based on the selected make in a dropdownlist. I am new to coding so I am not sure what my mistake is. The project doesn't give me any errors but no values are displayed when I selected the make.

This is my Partial View that I am adding into my Create View.

@model IgnitionHubPractice.Models.MakeModelDorpdownView

<div class="form-horizontal">
    <div class="form-group">
        @if (ViewBag.MakeList != null)
        {
            @Html.DropDownListFor(m => m.MakeID, ViewBag.MakeList as SelectList, "--Select Make--", new { @class = "form-control" })
        }
    </div>
    <div class="form-group">
        @Html.DropDownListFor(m => m.ModelID, new SelectList(" "), "--Select Model--", new { @class = "form-control" })
    </div>
</div>

<script>
    $(document).ready(function () {
        $("#MakeID").change(function () {
            $.get("/Cars/GetModelList",{ MakeID: $("MakeID").val() }, function (data) {
                $("#ModelID").empty();
                $.each(data, function (index, row) {
                    $("#ModelID").append("<option value ='" + row.ModelID + "' >" + row.Name + </option>")
                });
            });
        })
    });
</script>

This is my controller

        public ActionResult Create([Bind(Include = "CarID,Year,Color,Mileage,Cost,MarketValue,BodyType,Drive,Notes,Available,VinNumber,CarLotID,ModelID")] Car car, [Bind(Include ="MakeID,Name")] Make make)
    {


        if (ModelState.IsValid)
        {
            db.Cars.Add(car);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        List<Make> MakeList = db.Makes.ToList();
        ViewBag.MakeList = new SelectList(db.Makes, "MakeID", "Name", make.MakeID);
        ViewBag.ModelID = new SelectList(db.Models, "ModelID", "Name", car.ModelID);
        ViewBag.CarLotID = new SelectList(db.CarLots, "CarLotID", "LotName", car.CarLotID);
        return View(car);
    }
        public JsonResult GetModelList(int MakeID)
    {
        db.Configuration.ProxyCreationEnabled = false;
        List<Model> ModelList = db.Models.Where(x => x.MakeID == MakeID).ToList();
        return Json(ModelList, JsonRequestBehavior.AllowGet);
    }

Please help, thanks in advance.

Answer 1

In MVC you try to create a cascading drop down. So for easy understanding you can check the below link. It contanin detailed information for controller and View with Jquery part.

Please visit this link: Cascading Drop down List With MVC And AJAX