ASP.NET MVC и jQuery – Dynamic DropDowns

Встречаются ситуации, когда при разработке приложения вам нужно иметь выпадающий список, значения которого зависят от выбранного значения в другом выпадающем списке. Классический пример – форма обратной связи, подгружающей значения штатов и областей на основании выбранной страны. Например, если я выберу «United States», то во втором списке я хочу получить соответсвтующие штаты: New York, Alabama, Texas и т.д. Если же я выберу «Canada» - области Nova Scotia и Ontario. К счасть с использованием ASP.NET MVC и jQuery достичь такой функциональности довольно просто. А главное мы сможем это сделать без постбэков, используя jQuery AJAX.

Для начала убедитесь, что вы ссылаетесь на библиотеку jQuery, желательно в теге HEAD. Для этого примера взята верся jQuery 1.4. Вы можете скачать ее локально, либо использовать сервис Google:

<script src="/Scripts/jquery-1.4.min.js"type="text/javascript"></script>

или

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

Теперь наш тестовый HTML. Как можно увидеть список стран заранее заполнен и по-умолчанию выбрано пустое значение.

<table>
 <tr>
  <th>Country:</th>
  <td>
   <select id="countries">
    <option> -- Select a Country -- </option>
    <option value="1">United States</option>
    <option value="2">Canada</option>
    </select>
  </td>
 </tr><tr>
  <th>State:</th>
  <td><select id="states"></select></td>
 </tr>
</table>

Это наш контроллер, который будет снабжать нас странами и областями для выбранной страны

 var list = new object[] {};

 switch (countryID) {
  case 1:
   list = new object[] {
    new { value = 1, name = "Alabama" },
    new { value = 2, name = "Alaska" },
    new { value = 3, name = "California" }
   };
   break;
  case 2:
   list = new object[] {
    new { value = 1, name = "Ontario" },
    new { value = 2, name = "Quebec" },
    new { value = 3, name = "Nova Scotia" }
   };
   break;
 };

 return Json(list);
}

 

Значение специально захардкожены для простоты демонстрации. В реально жизни их стоить грузить из, например, базы данных или xml файла. Обратите внимание на сигнатуру метода. Мы принимаем единственный параметр countryID, который определяет какие данные должны быть возвращены. Мы также установили тип возвращаемого значения в JsonResult. Это означает, что объект, возвращаемый из метода будет сериализован как JSON объект, который может быть легко использован из jQuery. Закончив с контроллером перейдем к коду jQuery.

<script type="text/javascript">
 $(document).ready(function() {    
  $("#countries").change(function() {     
   $.post("/Home/GetStates/", { countryID: $(this).val() }, function(data) {
    populateDropdown($("#states"), data);
   });
  });
 });

 function populateDropdown(select, data) {
  select.html('');
  $.each(data, function(id, option) {
   select.append($('<option></option>').val(option.value).html(option.name));
  });       
 }
</script>

 

Разберем его. Сначала мы привязываем событие к выпадающему списку с выбором страны. Когда происходит это событие мы выполняем ассинхронный запрос метода GetStates контроллера Home. Выбранное значение страны передается в метод как переменная: { countryID: $(this).val() }. Когда мы получаем ответ мы передаем полученные данные в функцию populateDropdown, которая очищает выпадающий список штатов и областей и заполняет его новыми значениями посреством добавления элемента option и установки его параметров value и text.

Код проекта можно скачать по ссылке ниже:

DynamicDropDown.zip (37.28 kb)

Перевод статьи Dynamic Select Lists with MVC and jQuery