AJAX (Асинхронный JavaScript и XML) представляет собой технологию гибкого взаимодействия между клиентом и сервером. Благодаря ее использованию мы можем осуществлять асинхронные запросы к серверу без перезагрузки всей страницы. Правда, в настоящее время все больше вместо формата XML используется формат JSON для взаимодействия между клиентом и сервером.
Применительно к ASP.NET MVC использование AJAX вылилось в целую концепцию под названием "ненавязчивого AJAX" иненавязчивого JavaScript (unobtrusive Ajax/JavaScript). Смысл этой концепции заключается в том, что весь необходимый код JavaScript используется не на самой веб-странице, а помещается в отдельные файлы с расширением *.js. А затем с помощью тега<script> мы а веб-станице ссылаемся на данный файл кода.
Таким образом мы отделяем визуализацию от логики приложения. Что имеет свои плюсы. Так, выделение скрипта в отдельный загружаемый файл увеличивает производительность сайта, поскольку файл сохраняется в кэше и затем от туда подгружается.
Итак, после настройки и подключения всех необходимых скриптов мы можем приступить непосредственно к работе с Ajax. Допустим, у нас есть класс Book, содержащий данные о книге, а в БД у нас может находиться несколько книг одного автора. И нам надо реализовать поиск всех книг определенного автора.
public ActionResult BookSearch(string name)
{
var allbooks = db.Books.Where(a => a.Author.Contains(name)).ToList();
if(allbooks.Count<=0)
{
return HttpNotFound();
}
return PartialView(allbooks);
}
действие получает в качестве параметра имя автора и по нему осуществляет поиск в БД. Теперь добавим к представлениям данного контроллера частичное представление BookSearch.cshtml, поскольку частичные представления довольно удобны для работы с AJAX/
Теперь перейдем к самому представлению, которое и будет отображаться пользователю:
@{
ViewBag.Title = "Index";
}
<div>
@using (Ajax.BeginForm("BookSearch", new AjaxOptions { UpdateTargetId = "results"}))
{
<input type="text" name="name" />
<input type="submit" value="Поиск" />
}
<div id="results"></div>
</div>
Хелпер Ajax.BeginForm похож на хелпер Html.BeginForm - он также создает элемент form, который используется для отправки запроса на сервер. Первый параметр принимает имя действия, к которому будет обращен запрос. В данном случае это созданное выше действие BookSearch, которое возвращает частичное представление с данными. Если действие находится не в текущем контроллере, а в другом мы также можем указать имя контроллера: Ajax.BeginForm("BookSearch", "Home", new AjaxOptions....
Второй параметр более интересный. Он представляет объект AjaxOptions, который влияет на отображение результатов. Он принимает ряд параметров, из которых мы в данном случае использовали только UpdateTargetId. Этот параметр указывает, что у нас при получении результатов от сервера на странице будет обновляться элемент с id="results", в который помещется html-код выше созданного частичного представления.
Другим часто используемым AJAX-хелпером является Ajax.ActionLink. Он во многом похож на хелпер Ajax.BeginForm за тем исключением, что генерирует специальные ajax-ссылки. Посмотрим на примере. Добавим в представление следующую разметку:
<div id="bestbook">
@Ajax.ActionLink("Лучшая книга", "BestBook", new AjaxOptions{ UpdateTargetId="bestbook"})
</div>
В данном случае мы также используем объект AjaxOptions для установки параметров асинхронной ссылки, который принимает все те же параметры, что и в случае с ajax-формой.
Мы помещаем ссылку в элемент с id, который указывается в параметре UpdateTargetId. Таким образом, результат запроса будет замещать ссылку. Но для работы нам также необходимо, как и в случае с ajax-формой, действие контроллера и вызываемое им частичное представление.
технология AJAX все больше вместо передачи данных в формате xml использует формат JSON (JavaScript Object Notation). JSON не зависит от языка программирования, он более удобен и легче обрабатывается. Например, объект Book в формате JSON мог бы выглядеть бы так: {"Name":"Война и мир", "Author":"Л. Толстой", "Year":"1863"}.
В JSON каждый отдельный объект заключается в фигурные скобки и представляет собой набор пар ключ-значение, разделенных запятыми, где ключом является название свойства объекта, а значением соответственно значение этого свойства.
Ранее мы в ajax-форме обращались к методу, который возвращал данные в виде обычной разметки html. Теперь изменим его или определим новый, чтобы он возвращал данные в формате JSON:
public JsonResult JsonSearch(string name)
{
var jsondata = db.Books.Where(a => a.Author.Contains(name)).ToList<Book>();
return Json(jsondata, JsonRequestBehavior.AllowGet);
}
Кроме использования AJAX-форм и AJAX-ссылок мы можем выполнить запрос средствами самой библиотеки jQuery, не прибегая к ajax-хелперам.
Для примера создадим представление, в котором и будут осуществляться запросы AJAX:
<input type="text" name="name" id="search" />
<input type='button' id="submit" value='Поиск' />
<div id="results"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function (e) {
e.preventDefault();
var name = $('#search').val();
name = encodeURIComponent(name); $('#results').load("http://localhost:51805/Home/BookSearch?name=" + name);
});
});
</script>
В данном случае мы в функции jQuery вешаем на элемент с id=submit (а это кнопка) обработчик события click. Строкой var name = $('#search').val(); мы получаем введенное в текстовое поле значение. Следующей строчкой обрабатываем его - кодируем пробельные символы, так как иначе, если введенное слово будет содержать пробельные символы, то передаваемое в действие контроллера значение будет некорректно.
И в строке $('#results').load("http://localhost:51805/Home/BookSearch?name=" + name); мы загружаем в элемент с id=results контент, полученный с помощью метода load.
