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">

* 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

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