Я никогда раньше не имел дело ни с одним AJAX Toolkit от Microsoft, но недавно у меня появилась необходимость добавить картографический функционал к проекту, который я веду. Нам нужно было, чтобы у пользователей появилась возможность перемещать маркер по карте, а у нас получать его новые координаты на сервере. Очевидно, что нам для этого придется использовать AJAX в каком-либо виде. Сегодня я вам покажу насколько просто использовать связку ASP.NET MVC на сервере и jQuery на клиенте. Так как jQuery теперь включен в поставку ASP.NET MVC, то больше нет оправдания его не использовать.
Возьмем очень простой пример. У нас есть страница на которой я хочу выводить список людей, когда я нажимаю кнопку «Get people» и добавлять нового человека в базу данных, вводя его имя и нажимая «Add person». Вот как это выглядит:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/21c/17e/07d/21c17e07dc11a084581b5ff186c6bd92.png)
Для начала создадим кнопку «Get people» и список, в который будем загружать людей:
А что насчет обновления данных? Не менее просто. Для начала нам понадобится немного HTML кода: поле ввода и кнопка.
Я поздно занялся Ajax, но со связкой ASP.NET MVC + jQuery добавление такого функционала так же легко и приятно, как дуновение свежего ветра.
Демо-Solution вы можете скачать здесь: http://static.mikehadlow.com/JQueryAjax.zip
Перевод статьи MVC Framework and jQuery = Ajax heaven
Кросспост из моего блога
Возьмем очень простой пример. У нас есть страница на которой я хочу выводить список людей, когда я нажимаю кнопку «Get people» и добавлять нового человека в базу данных, вводя его имя и нажимая «Add person». Вот как это выглядит:
![](https://habrastorage.org/getpro/habr/post_images/21c/17e/07d/21c17e07dc11a084581b5ff186c6bd92.png)
Для начала создадим кнопку «Get people» и список, в который будем загружать людей:
- <input type="button" id="getPeople" value="Get People" />
- <ul id="people_list">
* This source code was highlighted with Source Code Highlighter.
Далее напишем обработчик события «страница загружена», который устанавливает обработчик клика по кнопке.
- $(function() {
- $("#getPeople").click(function() {
- $.getJSON("/Home/People", null, getPeople);
- });
- });
* This source code was highlighted with Source Code Highlighter.
Когда кнопка нажата мы инициализирум запрос JSON данных с пути /Home/People, который мапится на метод People контроллера Home.
- [AcceptVerbs(HttpVerbs.Get)]
- public ActionResult People()
- {
- var db = new DataClasses1DataContext();
- return Json(db.Persons);
- }
* This source code was highlighted with Source Code Highlighter.
Все, что мы тут делаем — это получаем список людей из базы данных(с помощью LINQ to SQL) и возвращаем их в виде JSON. Когда ответ получен браузером вызывается функция getPeople, как у мы указали это в методе getJSON. Вот код функции getPeople:
- function getPeople(people) {
- $("#people_list").text("");
- $.each(people, function(i) {
- $("#people_list").append("<li>" + this.Name + "</li>");
- });
- }
* This source code was highlighted with Source Code Highlighter.
Данные, полученые от сервера приходят в нее в виде параметра people. Все что нам нужно сделать — это итереровать через коллекцию и для каждого ее элемента добавлять тег <li> в наш список людей. Как видите, взаимодействие ASP.NET MVC и jQuery реализуется очень просто — никакой ручной конвертации данных из объектов C# в объекты JavaScript делать не пришлось.А что насчет обновления данных? Не менее просто. Для начала нам понадобится немного HTML кода: поле ввода и кнопка.
- <label>Name <input type="text" id="name" /></label><br />
- <input type="button" id="addPerson" value="Add Person" />
* This source code was highlighted with Source Code Highlighter.
И еще один обработчик нажатия кнопки.
- $("#addPerson").click(function() {
- var name = $("#name")[0].value;
- if (name == "") {
- alert("You must provide a name");
- return;
- }
- var person = { Name: name };
- $.post("/Home/People", person, null, "json");
- });
* This source code was highlighted with Source Code Highlighter.
На этот раз мы использовали полезную функцию post, чтобы отправить наш свежесозданный объект JSON по адресу /Home/People методом POST. Так как используется метод POST, то этот запрос будет пойман нашим перегруженым методом People с атрибутом AcceptVerbs[HttpVerbs.Post].
- [AcceptVerbs(HttpVerbs.Post)]
- public ActionResult People(string Name)
- {
- var db = new DataClasses1DataContext();
- var person = new Person {Name = Name};
- db.Persons.InsertOnSubmit(person);
- db.SubmitChanges();
- return null;
- }
* 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
Кросспост из моего блога