Populating A Select List Dynamically MVC - asp.net-mvc

Question

I am attempting to create a cascading dropdown. My Controller looks like this to initialize the view..
public ActionResult Create()
{
var model = new RoundDetailViewModel();
model.AvailableFacilities = new SelectList(db.Facilities, "FacilityId", "Facility_Name");
model.AvailableCourses = new SelectList(Enumerable.Empty<Course>(), "CourseId", "Course_Name");
model.AvailableTeeTypes= new SelectList(Enumerable.Empty<TeeType>(), "TeeTypeId", "Name");
return View(model);
}
This will populate the first dropdown, and also create 2 empty dropdown as expected.
Now on a selection of the first dropdown I want to call an Action in my controller to populate the second dropdown. This is where I am a little foggy on the code in the action to populate the second dropdown. I want to use something like this to trigger calling the action..
$("#ddlFacility").change(function () {
var selectedFacility = $(this).val();
if (selectedFacility != null && selectedFacility != '') {
$.getJSON("#Url.Action("GetCourse")", { facility: selectedFacility }, function (courses) {
var coursesSelect = $('#ddlCourse');
coursesSelect.empty();
$.each(courses, function (index, course) {
coursesSelect.append($('<option/>', {
value: course.value,
text: course.text
}));
});
});
}
});
public ActionResult Courses(int facilityId)
{
//WHAT GOES HERE TO POPULATE SELECT LIST??
}

Answer 1

Need to return JsonResult and allow Get (if that is what you decide to do) Alternatively you need to make it a POST and do a POST to it.
Something like
public JsonResult GetCourses(int id)
{
var Courses= db.Courses.Where(a=>facilityId==id).ToList();
SelectList list = new SelectList(Courses,"Text", "Value");
return Json(list , JsonRequestBehavior.AllowGet);
}