Cascading Drop Down List in MVC w/ SQL Database - mysql

Question

I have two drop down lists which are District & School. I would like whenever I choose a district from the list, the values that are in the school list will change at the same time. I am using ajax to try and post the data to another controller but the school list does not change at all. It contains the names of all schools no matter which district I select. I am thinking it has something to do with the line Schools = new SelectList(db.Schools.ToList(), "schoolID", "name")in my SchoolDistrictInformation controller. Here is what I am working with so far:
The security code is a code that must be entered and corresponds with the selected district. It must match with the code in the database or the form will not be submitted.
View Model:
public class DistrictSchoolListViewModel
{
public SelectList Districts { get; set; }
public SelectList Schools { get; set; }
public string SelectedSchool { get; set; }
public string SelectedDistrict { get; set; }
[Required(ErrorMessage = "This code is required")]
public string DistrictCode { get; set; }
}
Controllers:
public ActionResult SchoolDistrictInformation()
{
var viewModel = new DistrictSchoolListViewModel()
{
Districts = new SelectList(db.Districts.ToList(), "leaID", "name"),
Schools = new SelectList(db.Schools.ToList(), "schoolID", "name")
};
return View(viewModel);
}
[HttpPost]
public ActionResult GetSchools(DistrictSchoolListViewModel model)
{
var selectedDistrict = model.SelectedDistrict;
var schools = findSchools(selectedDistrict);
IEnumerable<SelectListItem> filteredSchools =
schools.Select(m => new SelectListItem { Text = m.name, Value = m.schoolID.ToString() });
return PartialView("SchoolDistrictInformation", filteredSchools);
}
School Table Query:
internal IQueryable<School> findSchools(string district)
{
var query = from School in db.Schools
where School.leaID.Equals(district)
select School;
return query;
}
School District Information View:
#model Staff_Form.Models.DistrictSchoolListViewModel
<h2>Select District and School from list</h2>
<script type="text/javascript" src="/scripts/jquery-1.4.4.js"></script>
<script type="text/javascript">
$('#SelectedDistrict').on('change', function () {
$.ajax({
type: "POST",
url: 'Controller/GetSchools',
data: $(this).val(),
success: function (response) {
$('#SelectedSchool').html(response);
}
});
});
</script>
<div>
<form action="#Url.Action("StaffInformation", "Staff")" method="get">
District: #Html.DropDownListFor(m => m.SelectedDistrict, Model.Districts, "----Select----")
Security Code: #Html.TextBoxFor(m => m.DistrictCode) <br />
School: #Html.DropDownListFor(m => m.SelectedSchool, Model.Schools, "----Select----")
<input type="submit" value="Submit" />
</form>
</div>
Get Schools View:
#model System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>
#{ Layout = null;}
#foreach (var school in Model)
{
<option value="#school.Value">#school.Text</option>
}
I appreciate any and all help given towards the solution of this question. Thank you!

Answer 1

Your script is before the the element with id="SelectedDistrict" and not wrapped in $(document).ready() so your attaching an event to an element which does not even exist at that point.
Move the script to the bottom of the page (immediately before the closing </body? tag and/or wrap it inside document.ready
$(document).ready(function() { // or $(function() {
$('#SelectedDistrict').on('change', function () {
....
});
});
Side note: Update your version of jquery to a recent version and consider returning json to populate your 2nd dropdown (refer this answer)

Answer 2

You should include the property name when you pass the district back to the GetSchools action
$('#SelectedDistrict').on('change', function () {
$.ajax({
type: "POST",
url: 'Controller/GetSchools',
data: { SelectedDistrict: $(this).val() },
success: function (response) {
$('#SelectedSchool').html(response);
}
});
});