Данное руководство устарело. Актуальное руководство: Руководство по 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-код списка городов.