(MVC) MVC (2011 год)

Заполнение связанных списков на MS AJAX и jQuery.

Технология MS AJAX появилась в качестве приблуды еще в Visual Studio 2005 (не сразу, а после SP1) - изначально она называлась ATLAS. Я изучал эту технологию еще по первым книгам по АТЛАСУ . К моменту появления Visual Studio 2008 этой технологий пользовались уже все ASP.NET программисты. У меня на сайте подробно описаны несколько форм на MS AJAX, например в топике - Мой первый фото-слайдер на Flex 4.

Программисты других платформ часто тупят и думают что MS AJAX чем-то напоминает обычный AJAX из JavaScript. Собственно движок асинхронных AJAX-запросов в технологии MS AJAX действительно присутствует, однако это внутренний (как-бы невидимый) скриптик, подтягиваемый из ScriptResource - а вообще вся суть этой технологии в том, чтобы сконфигурировать асинхронный AJAX-запрос ИСКЛЮЧИТЕЛЬНО КЛИКАМИ МЫШКОЙ в Visual Studio. Навык применения MS AJAX состоит из умения точно кликнуть мышков с первого раза в нужном месте экрана, выбрать там правильный параметр, в понимании смысла этих параметров, в умении пользоваться конфигураторатором студии для того или иного варианта использования MS AJAX.

Ниже я покажу десять волшебных кликов мышкой, которые позволяют сконфигурировать AJAX-запросы простейшим образом (и парсинг ответов) БЕЗ ПРОГРАММИРОВАНИЯ - только тыканием мышки в нужные места на экране. А еще ниже я покажу как в точности то же самое делается путем программирования (на jQuery).

Итак, есть два DropDownList (select/option в HTML). Один страна, другой город. По выбору страны - надо заполнить второй список городами. Для этого тыкаем мышкой в следующие места на экране:

Как видите, все чудесно работает. Асинхронный запрос AJAX был сконфигурирован и отлажен в течении минуты - десят строк кода плюс двадцать кликов мышкой.




Теперь сделаем все то же самое с помощью jQuery. В общем, времени это займет наверное побольше - плюс потребуются навыки программирования. Все начинается с хандлера, который должен выдать корректный JSON - как это делается я описывал уже не раз в своих рецептах, см например Как сделать простейший Web-handler - формирующий XML или JSON.

Затем я написал вот такой копеечный jQuery-скриптик:


   1:  $(document).ready(function () {
   2:   
   3:      $('#FromCountry').bind('change', fill_from_city);
   4:   
   5:      function fill_from_city() {
   6:          $.ajax({
   7:              'url': 'GetCity.ashx',
   8:              'data': { 'country': $('#FromCountry').val() },
   9:              'dataType': 'json',
  10:              'type': 'GET',
  11:              'success': from_city_result
  12:          });
  13:      };
  14:   
  15:      function from_city_result(json_array) {
  16:          if (json_array.length) {
  17:              $('#FromCity option').remove();
  18:              $.each(json_array, function (index, term) {
  19:                  $('#FromCity').append(
  20:                              $('<option></option>').val(term.Name).html(term.Name)
  21:                          );
  22:              });
  23:          }
  24:      };
  25:  });

Для того, чтобы вытащить значение подчиненного списка в ASP.NET - я добавил на страничке ASP.NET два скрытых поля:


   1:  <asp:TextBox ID="txFromCity" runat="server" style="visibility:hidden;width:0px;height:0px;" ></asp:TextBox>
   2:  <asp:TextBox ID="txToCity" runat="server" style="visibility:hidden;width:0px;height:0px;"></asp:TextBox>

И положил в них значение 'город' из подчиненного списка страна-город.


  27:  $(document).ready(function () {
  28:   
  29:      $('#ToCity').bind('change', tocity_change);
  30:      $('#FromCity').bind('change', fromcity_change);
  31:   
  32:      function tocity_change() {
  33:          $('#txToCity').val($('#ToCity').val());
  34:      };
  35:   
  36:      function fromcity_change() {
  37:          $('#txFromCity').val($('#FromCity').val());
  38:      };
  39:   
  40:  });

Осталось только проверить как все работает:



Описанная задачка заполнения связанных списков проста предельно. В дикой природе такие простые задачки встречаются редко. Лично мне опыт позволяет решать эту задачку за примерно одинаковое время и и на jQuery и на MS AJAX (и на Flex) - но на основании моей заметки вы можете оценить свои силы и выбрать подходящий для себя путь в более сложных случаях.



Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17
Link to this page: http://www.vb-net.com/LinkedList/index.htm
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <MAIL ME>  <ABOUT ME>  < THANKS ME>