ASP.NET MVC + jQuery = рай для AJAX

Я никогда раньше не имел дело ни с одним AJAX Toolkit от Microsoft, но недавно у меня появилась необходимость добавить картографический функционал к проекту, который я веду. Нам нужно было, чтобы у пользователей появилась возможность перемещать маркер по карте, а у нас получать его новые координаты на сервере. Очевидно, что нам для этого придется использовать AJAX в каком-либо виде. Сегодня я вам покажу насколько просто использовать связку ASP.NET MVC на сервере и jQuery на клиенте. Так как jQuery теперь включен в поставку ASP.NET MVC, то больше нет оправдания его не использовать.

Возьмем очень простой пример. У нас есть страница на которой я хочу выводить список людей, когда я нажимаю кнопку "Get people" и добавлять нового человека в базу данных, вводя его имя и нажимая "Add person". Вот как это выглядит:

Для начала создадим кнопку "Get people" и список, в который будем загружать людей:

   1:  <input type="button" id="getPeople" value="Get People" />

   2:  <ul id="people_list">

Далее напишем обработчик события "страница загружена", который устанавливает обработчик клика по кнопке.

   1:  $(function() {

   2:      $("#getPeople").click(function() {

   3:          $.getJSON("/Home/People", null, getPeople);

   4:      });

   5:  });

Когда кнопка нажата мы инициализирум запрос JSON данных с пути /Home/People, который мапится на метод People контроллера Home.

   1:  [AcceptVerbs(HttpVerbs.Get)]

   2:  public ActionResult People()

   3:  {

   4:      var db = new DataClasses1DataContext();

   5:      return Json(db.Persons);

   6:  }

Все, что мы тут делаем - это получаем список людей из базы данных(с помощью LINQ to SQL) и возвращаем их в виде JSON. Когда ответ получен браузером вызывается функция getPeople, как у мы указали это в методе getJSON. Вот код функции getPeople:

   1:  function getPeople(people) {

   2:      $("#people_list").text("");

   3:      $.each(people, function(i) {

   4:          $("#people_list").append("<li>" + this.Name + "</li>");

   5:      });

   6:  }

Данные, полученые от сервера приходят в нее в виде параметра people. Все что нам нужно сделать - это итереровать через коллекцию и для каждого ее элемента добавлять тег <li> в наш список людей. Как видите, взаимодействие ASP.NET MVC и jQuery реализуется очень просто - никакой ручной конвертации данных из объектов C# в объекты JavaScript делать не пришлось.

А что насчет обновления данных? Не менее просто. Для начала нам понадобится немного HTML кода: поле ввода и кнопка.

   1:  <label>Name <input type="text" id="name" /></label><br />

   2:  <input type="button" id="addPerson" value="Add Person" />

И еще один обработчик нажатия кнопки.

   1:  $("#addPerson").click(function() {

   2:      var name = $("#name")[0].value;

   3:      if (name == "") {

   4:          alert("You must provide a name");

   5:          return;

   6:      }

   7:      var person = { Name: name };

   8:      $.post("/Home/People", person, null, "json");

   9:  });

На этот раз мы использовали полезную функцию post, чтобы отправить наш свежесозданный объект JSON по адресу /Home/People методом POST. Так как используется метод POST, то этот запрос будет пойман нашим перегруженым методом People с атрибутом AcceptVerbs[HttpVerbs.Post].

   1:  [AcceptVerbs(HttpVerbs.Post)]

   2:  public ActionResult People(string Name)

   3:  {

   4:      var db = new DataClasses1DataContext();

   5:      var person = new Person {Name = Name};

   6:      db.Persons.InsertOnSubmit(person);

   7:      db.SubmitChanges();

   8:      return null;

   9:  }

Все что нам приходится сделать на сервере, чтобы получить данные из запроса это назвать параметр этого метода также, как и поле нашего JSON объекта, то есть Name. ASP.NET MVC автоматически найдет соответсвие и отдаст нам нужные данные. Если вам нужно использовать сложный JSON объект, то вы можете десериализовать его, используя встроеный databinding. Осталось только создать объект для базы данных и сохранить его.

Я поздно занялся Ajax, но со связкой ASP.NET MVC + jQuery добавление такого функционала так же легко и приятно, как дуновение свежего ветра.

Демо-Solution вы можете скачать здесь: http://static.mikehadlow.com/JQueryAjax.zip

Перевод статьи MVC Framework and jQuery = Ajax heaven