□ ajaxSuccess — событие, возникающее в момент успешного завершения Ajax-запроса. Если Ajax-запрос был выполнен успешно и были получены данные от сервера, то вызывается событие ajaxSuccess, обработав которое разработчик может отреагировать на успешный асинхронный запрос.
Все эти события могут быть обработаны пользовательскими функциями, в которые передается от одного до четырех параметров. Не принимают параметры только функции, обрабатывающие события ajaxstart и ajaxstop. Следующие параметры используются во всех остальных функциях:
□ event — объект, содержащий информацию о событии;
□ XMLHttpRequest — объект, содержащий информацию о запросе;
□ ajaxOptions — параметры, которые были использованы для запроса.
Событие ajaxError, кроме перечисленных трех, содержит четвертый параметр:
□ thrownError — объект, который содержит информацию о произошедшей ошибке.
Использовать данные события достаточно просто. Рассмотрим пример, который выводит пользователю сообщение о старте Ajax-запроса, скрывает кнопку, для предотвращения повторного запроса, и возвращает ее после того, как запрос выполнился. Для этого модифицируем код функции GetTime и разметку так, как представлено в следующем фрагменте:
<script type="text/javascript">
function GetTime() {
$('#requestStatus').ajaxStart(function() {
$(this).text('Запрос запушен...');
$('#ajaxSend').hide();
});
$('#requestStatus').ajaxStop(function() {
$(this).text('Запрос завершен...');
$('#ajaxSend').show();
});
$.get('Home/GetTime',
null,
function(result) {
$('#timeText').text('Bpeмя на сервере: ' + result);
});
}
</script>
<span id="requestStatus">Нажмите кнопку для 3anpoca</span><br/>
<input id="ajaxSend"
type="button"
onclick="javascript:GetTime()"
value="Получить время" />
<span id="timeText">Время не получено</span>
Здесь представлена разметка для элемента requestStatus с отображением статуса Ajax-запроса, кнопки ajaxSend и элемента timeText для отображения результата запроса. В JavaScript-коде определены две функции для обработки ajaxStart и ajaxStop, которые отображают статус текущего состояния запроса и скрывают или показывают кнопку в зависимости от состояния. Для более явной демонстрации действия событий jQuery добавим в функцию GetTime контроллера HomeController задержку выполнения, чтобы увидеть, как изменяется сообщение о статусе запроса:
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult GetTime()
{
Thread.Sleep(1000);
return Json(DateTime.Now.ToString());
}
Теперь, если пользователь нажмет кнопку Получить время, состояние запроса будет выведено в специальном поле (рис. 7.6). После получения результата поле состояния соответственно изменится (рис. 7.7).
Мы рассмотрели jQuery API, которое позволяет значительно упростить работу с Ajax-запросами как в целом, так и для частых практических ситуаций. Как мы убедились, некоторые варианты использования Ajax в jQuery могут состоять всего из одной строки текста. В следующей части главы мы рассмотрим применение jQuery более подробно.
Применение Ajax и jQuery в MVC Framework
Рассмотрим применение инструментов Ajax в MVC Framework на конкретных примерах. Для этого реализуем несколько простых сценариев в проекте MVC Framework по умолчанию. Чтобы охватить как можно больше, реализация будет выполнена в двух вариантах: с помощью ASP.NET Ajax и с помощью jQuery.
Пример 1. Проверка логина при регистрации
Первый пример, который мы рассмотрим, является решением частой задачи с помощью Ajax. В этом примере на форме регистрации добавляется функциональность по проверке введенного нового имени пользователя на наличие в базе данных. Задача проста: проверить, не является ли имя, которое себе выбрал пользователь, уже существующим на сайте.
Первоначально создадим действие Checkusername в контроллере Accountcontroller для реализации проверки на наличие имени пользователя на сайте. Далее представлен код метода checkusername, который принимает один строковый параметр username:
public ActionResult CheckUsername(string username)
{
string result;
if (String.IsNullOrEmpty(username))
{
result = "не указано имя пользователя";
}
else
{
var users = Membership.FindUsersByName(username);
result = users.Count > 0 ?
"такой пользователь уже существует" :
"ваше имя пользователя не занято";
}
return Json(result);
}
Данный метод принимает параметр с именем пользователя для проверки существования регистрации пользователя с таким именем. Метод CheckUsername возвращает строковое представление результата проверки.
Для вызова этого метода необходимо создать соответствующую разметку.
Реализация на ASP.NET Ajax
Добавим в Register.aspx ссылку для проверки введенного логина на наличие плюс поле для вывода результата проверки:
<label for="username">Username:</label>
<%= Html.TextBox("username") %>
<%= Html.ValidationMessage("username") %>
<%= Ajax.ActionLink("Пpoверить доступность логина",
"CheckUsername",
new AjaxOptions {OnBegin ="CheckUsername_OnBegin"
, UpdateTargetld =
"check_username"}
)
%>
<span id="check_username"></span>
Здесь с помощью вспомогательного метода Ajax.ActionLink создается гиперссылка для вызова действия CheckUsername. C помощью создания структуры типа AjaxOptions мы задаем несколько параметров. Во-первых, мы задаем функцию CheckUsername_OnBegin, которая должна быть вызвана перед запросом, а во-вторых, указываем тег с идентификатором check_username, который должен быть использован для рендеринга результата.
К сожалению, базовый функционал ASP.NET Ajax пока не поддерживает возможность задавать динамические параметры для запросов, формируемых через Ajax.ActionLink. Поэтому, чтобы передать с запросом введенные пользователем данные, нам нужно обработать начало запроса и сформировать самостоятельно URL запроса с необходимой строкой параметров. Чтобы сделать это, мы задали функцию CheckUsername_OnBegin, код которой выглядит так:
<script type="text/javascript">
function CheckUsername_OnBegin(data) {
