Как стать автором
Обновить

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

Время на прочтение 3 мин
Количество просмотров 50K
Автор оригинала: Mike Hadlow
Я никогда раньше не имел дело ни с одним 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">
* This source code was highlighted with Source Code Highlighter.
Далее напишем обработчик события «страница загружена», который устанавливает обработчик клика по кнопке.
  1. $(function() {
  2.     $("#getPeople").click(function() {
  3.         $.getJSON("/Home/People", null, getPeople);
  4.     });
  5. });
* This source code was highlighted with Source Code Highlighter.
Когда кнопка нажата мы инициализирум запрос 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. }
* This source code was highlighted with Source Code Highlighter.
Все, что мы тут делаем — это получаем список людей из базы данных(с помощью 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. }
* This source code was highlighted with Source Code Highlighter.
Данные, полученые от сервера приходят в нее в виде параметра 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" />
* This source code was highlighted with Source Code Highlighter.
И еще один обработчик нажатия кнопки.
  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. });
* This source code was highlighted with Source Code Highlighter.
На этот раз мы использовали полезную функцию 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. }
* This source code was highlighted with Source Code Highlighter.
Все что нам приходится сделать на сервере, чтобы получить данные из запроса это назвать параметр этого метода также, как и поле нашего 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

Кросспост из моего блога

Теги:
Хабы:
+22
Комментарии 35
Комментарии Комментарии 35

Публикации

Истории

Работа

.NET разработчик
65 вакансий

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн