Динамическая загрузка списка по выбору из другого списка

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Нередко у нас появляется необходимость динамически связать два выпадающих списка на форме. Рассмотрим, как это сделать

Допустим, у нас есть следующие модели, представляющие страну и город, а также класс контекста:

public class StateContext : DbContext
{
    public DbSet<State> States { get; set; }
    public DbSet<City> Cities { get; set; }
}

public class State
{
    public int Id { get; set; }
    public string Name { get; set; }

    public ICollection<City> Cities { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }

    public int StateId { get; set; }
    public State State { get; set; }
}

В классе контроллера определим метод, который будет отдавать представление с двумя списками:

public class HomeController : Controller
{
    StateContext db = new StateContext();

    public ActionResult Index()
    {
        int selectedIndex = 1;
        SelectList states = new SelectList(db.States, "Id", "Name", selectedIndex);
        ViewBag.States = states;
		SelectList cities = new SelectList(db.Cities.Where(c=>c.StateId==selectedIndex), "Id", "Name");
        ViewBag.Cities = cities;
        return View();
    }
    public ActionResult GetItems(int id)
    {
        return PartialView(db.Cities.Where(c => c.StateId == id).ToList());
    }
}

Пусть по умолчанию в списке стран будет выбран первый элемент, поэтому также через ViewBag передаем данные для второго списка, который содержит города первой страны.

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

Добавим для этого метода частичное представление GetItems.cshtml:

@model IEnumerable<TwoDropdownApp.Models.City>
<select id="city" name="City">
    @foreach (var item in Model)
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>

Здесь формируется элемент select, то есть выпадающий список, по переданному списку городов.

И теперь определим главное представление:

@{
    ViewBag.Title = "Home Page";
}

<h3>Выберите страну</h3>
@Html.DropDownList("State", ViewBag.States as SelectList, new {id="state" })
<h3>Выберите город</h3>
@Html.DropDownList("City", ViewBag.Cities as SelectList, new { id = "city" })

@section scripts{
<script type="text/javascript">
    $(function () {
    
        $('#state').change(function()
        {
            // получаем выбранный id
            var id = $(this).val();
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetItems")/' + id,
                success: function (data) {
                    
                    // заменяем содержимое присланным частичным представлением
                    $('#city').replaceWith(data);
                }
            });
        });
    })
</script>
}

Здесь подразумевается, что на мастер-странице перед секцией scripts уже подключены файлы jquery. При изменении выбора в спиcке городов идет ajax-запрос к методу GetItems, а возвращенное частичное представление заменяет имеющийся html-код списка городов.