Drop Down List Giving Incorrect Values

Question

Hi everyone,

I have followed the following tutorial for my project:

https://www.youtube.com/watch?v=h_ViuyVs4AE

The issue that I have is that when I click an item in the first drop down box, it does not give the correct values in the second box, it only gives one value and it is incorrect. It should display all the Model_Name's(Vehicle_Model table) that are for each Make_Name(Vehicle_Make table).

Index.cshtml code:

 

@model GoogleMap.Models.MyPageViewModel



            <script>
                $(function () {
                    $("#ContID").change(function () {
                        $.get("/Map/GetModById", { MID: $("#ContID").val() }, function (data) {
                            $("#St").empty();
                            $.each(data, function (index, row) {
                                $("#St").append(" <option value='" + row.Model_ID + "'>" + row.Model_Name + "</option>")

                            });
                        })
                    });
                });

            </script>
            @Html.DropDownListFor(p => p.SelectedMake_Id, ViewBag.Vehicle_Make as SelectList, "Select Vehicle Make", new { id = "ContID" })

 MapController.cs code:

 

public class MapController : Controller
    {

        private GoogleMapEntities db = new GoogleMapEntities();
        //Get the select ID???
        int SelectedMake_Id = 0;


        // GET: Map
        public ActionResult Index()
        {
            GoogleMapEntities GE = new GoogleMapEntities();
            List<Vehicle_Details> vehList = db.Vehicle_Details.ToList();

            GoogleMapViewModel GMviewmodel = new GoogleMapViewModel();
            List<GoogleMapViewModel> GMviewmodelList = new List<GoogleMapViewModel>();


            //Populate the ViewModel
            MyPageViewModel vm = new Models.MyPageViewModel();
            vm.GoogleMapViewModelList = GMviewmodelList;
            vm.SelectedMake_Id = SelectedMake_Id;


            ViewBag.Vehicle_Make = new SelectList(db.Vehicle_Make, "Make_ID", "Make_Name");

            return View(vm);
        }

        public JsonResult GetModById(int MID)
        {
            db.Configuration.ProxyCreationEnabled = false;
            return Json(db.Vehicle_Model.Where(p => p.Model_ID == MID), JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult Search(string Location)
        {
            GoogleMapEntities GE = new GoogleMapEntities();
            ////SELECT Make_Name DATA FROM DB1
            // var result = GE.Vehicle_Model.Where(x => x.Model_Name.StartsWith(Location)).ToList();
            var GetVeh = db.GetMapSearch().Where(x => x.Model_Name.StartsWith(Location)).ToList();

            return Json(GetVeh, JsonRequestBehavior.AllowGet);

        }

    }