Каскадный выпадающий список в MVC w/SQL Database

Question

У меня есть два раскрывающихся списка, которые являются округом & Школа. Я хотел бы, чтобы всякий раз, когда я выбираю район из списка, значения, которые входят в список школ, будут меняться одновременно. Я использую ajax, чтобы попытаться отправить данные другому контроллеру, но список школ вообще не изменяется. Он содержит имена всех школ независимо от того, какой район я выбираю. Я думаю, что это имеет какое-то отношение к линии Schools = new SelectList(db.Schools.ToList(), "schoolID", "name") в моем контроллере SchoolDistrictInformation. Вот что я работаю до сих пор:

Код безопасности - это код, который необходимо ввести и соответствует выбранному округу. Он должен соответствовать коду в базе данных или форма не будет отправлена.

вид Модель:

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; } 
} 

Контроллеры:

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); 
} 

Школа Таблица запросов:

internal IQueryable<School> findSchools(string district) 
    { 
     var query = from School in db.Schools 
        where School.leaID.Equals(district) 
        select School; 
     return query; 
    } 

Школьный округ Информация Вид:

@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> 

Получить школы Вид:

@model System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem> 
@{ Layout = null;} 

@foreach (var school in Model) 
{ 
    <option value="@school.Value">@school.Text</option> 
} 

Я ценю любые помощь, оказываемая к решению этого вопроса. Спасибо!

Answer 1

Ваш скрипт перед элементом с id="SelectedDistrict" и не обернут в $(document).ready() так ваше присоединение события к элементу, который даже не существует в этой точке.

Переместить сценарий в нижней части страницы (непосредственно перед закрывающим </body? тег и/или обернуть его в document.ready

$(document).ready(function() { // or $(function() { 
    $('#SelectedDistrict').on('change', function() { 
     .... 
    }); 
}); 

Side Примечание: Обновите версию JQuery до последней версии и рассмотреть возможность возвращения JSON для заполнения вашего второго выпадающего списка (см. this answer)

Answer 2

Вы должны включить имя свойства, когда вы передаете район назад к действию GetSchools

$('#SelectedDistrict').on('change', function() { 
    $.ajax({ 
     type: "POST", 
     url: 'Controller/GetSchools', 
     data: { SelectedDistrict: $(this).val() }, 
     success: function (response) { 
      $('#SelectedSchool').html(response); 
     } 
    }); 
});