Я никогда раньше не имел дело ни с одним 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
