В состав проекта MVC Framework по умолчанию входят два JavaScript-файла: MicrosoftAjax.js и MicrosoftMvcAjax.js, в которых для разработчиков предложены вспомогательные функции при работе с Ajax. Рассмотрим их по порядку:

□ MicrosoftAjax.js — основной файл, который содержит всю инфраструктуру ASP.NET для работы с Ajax. Эта библиотека может быть знакома тем, кто использовал Ajax.NET или AjaxControlToolkit в проектах на базе классического ASP.NET;

□ MicrosoftMvcAjax.js — файл, осуществляющий поддержку Ajax в MVC-проектах, код которых написан с помощью специальных вспомогательных методов. Эта библиотека использует MicrosoftAjax.js для своей работы.

Для упрощения работы с Ajax MVC Framework содержит кроме JavaScript-файлов еще и расширения в виде классов и методов .NET. Так, класс viewPage, по умолчанию базовый для всех страниц MVC-проектов, содержит свойство Ajax, которое является экземпляром класса AjaxHelper.AjaxHelper содержит перечисленные в табл. 7.1 вспомогательные методы для работы с Ajax в представлениях.

Чтобы использовать данные расширения в своих проектах, необходимо подключить оба JavaScript-файла, MicrosoftAjax.js и MicrosoftMvcAjax.js, на необходимую страницу либо для всех страниц сразу через файл master-страницы. Код для добавления ссылок на эти файлы в master-странице может быть следующим:

Далее мы рассмотрим более подробно эти вспомогательные методы и еще один вспомогательный класс AjaxOptions и свойство IsAjaxRequest, также имеющие отношение к Ajax.

AjaxOptions

Класс AjaxOptions представляет собой набор свойств, которые описывают разнообразные опции Ajax-запросов для вспомогательных методов MVC Framework. AjaxOptions содержит следующие свойства:

□ Confirm — задает текст, который будет выведен в запросе пользователю перед осуществлением запроса. Установка этого параметра приведет к тому, что перед запросом на сервер у пользователя будет возможность подтвердить отправку запроса или отменить ее (рис. 7.4);

Рис. 7.4. Запрос подтверждения при использовании параметра Confirm

□ HttpMethod — устанавливает тип HTTP-запроса (GET или POST), который будет использоваться при формировании асинхронного запроса. Может содержать одно из двух значений Get или Post, по умолчанию установлено в Post;

□ InsertionMode — свойство задает одно из значений одноименного перечисления InsertionMode: Replace, InsertBefore, InsertAfter. Значение по умолчанию Replace. Данное свойство устанавливает метод включения данных из ответа от сервера в элемент разметки: перезапись значения элемента, добавление до содержимого или после него. Данное свойство используется совместно со свойством UpdateTargetId, указывающим идентификатор элемента разметки, в которое будет записано значение результата ответа от сервера;

□ LoadingElementId — задает идентификатор элемента разметки, который должен быть отображен во время Ajax-запроса. Использование данного свойства приведет к тому, что указанный элемент будет показан во время запроса, а затем скрыт. Использование этого свойства имеет смысл для демонстрации пользователю анимации ожидания во время продолжительных запросов;

□ OnBegin — задает наименование JavaScript-функции, которая должна быть вызвана непосредственно перед отправкой асинхронного запроса на сервер;

□ Oncomplete — задает наименование JavaScript-функции, которая должна быть вызвана сразу после того, как запрос был завершен, и до того, как результат запроса был записан в элемент разметки. Не имеет значения, был ли завершен запрос удачно или нет, функция, указанная через Oncomplete, все равно будет вызвана. Данная функция будет вызвана до onFailure или onSuccess. Если требуется, чтобы результат не был записан в элемент разметки, то функция, указанная в Oncomplete, должна вернуть false;

□ OnFailure — задает наименование JavaScript-функции, которая должна быть вызвана в случае, когда асинхронный запрос завершился с ошибкой;

□ OnSuccess — задает наименование JavaScript-функции, которая должна быть вызвана в случае, когда асинхронный запрос завершился успешно;

□ updateTargetid — задает идентификатор элемента разметки, в который должен быть записан результат асинхронного запроса на сервер. Вместе с этим параметром может быть использован параметр InsertionMode, который указывает, каким именно способом должны быть записаны данные в элемент разметки;

□ url — устанавливает значение адреса сервера, куда следует отправить запрос. Свойство использовать не обязательно, когда класс AjaxOptions применяется в Ajax.BeginForm и Ajax.ActionLink, где действие и контроллер задают данные адреса. В случае если Url все же будет указан, он переопределит значения, определенные в этих методах.

Класс AjaxOptions и его свойства используются во вспомогательных методах Ajax.BeginForm и Ajax.ActionLink для тонкой настройки асинхронного запроса и его параметров, а также действий, осуществляемых в ответ на изменение состояния запроса. Например, в следующием фрагменте кода AjaxOptions используется для задания ряда параметров при вызове Ajax.ActionLink:

  <%= Ajax.ActionLink("получить время", "GetTime", "Home",

    new AjaxOptions() {

      OnFailure="OnError",

      Confirm="Bы уверены?",

      UpdateTargetId = "timeText"

    },

    (object) null)

  %>

  Нажмите на ссылку для получения времени<^span>

Ajax.BeginForm

Вспомогательный метод Ajax.BeginForm, в зависимости от реализации, содержит набор из следующих параметров:

□ actionName — указывает наименование действия, которое следует вызвать в запросе, в случае, когда используется вариант метода без указания контроллера, вызывается действие контроллера текущего контекста;

□ controllerName — указывает наименование контроллера (сокращенное, без суффикса Controller), в котором следует искать и вызвать указанное в параметре actionName действие;

□ routeValues — указывает объект, содержащий параметры для механизма маршрутизации;

□ ajaxOptions — указывает экземпляр класса AjaxOptions с заданными свойствами, которые определяют параметры асинхронного запроса и могут определять ряд JavaScript-функций, реагирующих на изменение состояния запроса;

□ htmlAttributes — набор значений пользовательских атрибутов для тега form, которые должны быть помещены в разметку формы.

Ajax-расширения MVC Framework могут значительно облегчить работу по созданию Ajax-функционала как для форм, так и для простых запросов. Например, следующий код описывает создание простой Ajax-формы:

<% using(Aj ax.BeginForm("LoginForm",

     new AjaxOptions{UpdateTargetId="loginStatus"})) {

%>

 

    Введите логин и пароль, чтобы продолжить.

 

 

Введите логин:

 

<%= Html.TextBox("login")%>

 

Введите пароль:

 

<%= Html.TextBox("password")%>

 

<% } %>

Здесь с помощью вспомогательного метода Ajax.BeginForm создается стандартная форма авторизации с двумя текстовыми полями для ввода логина и пароля и кнопкой отправки данных. Обратите внимание на параметры Ajax.BeginForm: во-первых, указывается LoginForm — наименование действия, которое должно вызваться в ответ на отправку данных с формы, во-вторых, с помощью класса AjaxOptions задается специальный параметр UpdateTargetId, который указывает на элемент, ответственный за отображение результата запроса. То есть, если запрос вернет данные, они будут отображены, в нашем случае, с помощью элемента span с идентификатором loginStatus.

Как можно заметить, создание всего Ajax-функционала не потребовало у нас ни строчки JavaScript, не требуется от нас и понимание различий реализаций поддержки Ajax разными браузерами. Все это скрытно реализуют библиотеки MicrosoftAjax.js и MicrosoftMvcAjax.js, делая за разработчика всю рутинную работу по организации работы с асинхронными запросами. Если мы взглянем на исходный код, который сгенерирует подсистема Ajax в MVC Framework для нашего кода, то сможем убедиться, что генерируется достаточно много автоматического кода. Далее представлено определение формы, которое создано автоматически для нашего примера:

Ajax.ActionLink

Вспомогательный метод Ajax.ActionLink, в зависимости от реализации, содержит набор из нескольких следующих параметров:

□ linkText — текст, который будет рендериться в виде значения гиперссылки;

□ actionName — указывает наименование действия, которое следует вызвать в запросе, в случае, когда используется вариант метода без указания контроллера, вызывается действие контроллера текущего контекста;

□ controllerName — указывает наименование контроллера (сокращенное, без суффикса Controller), в котором следует искать и вызвать указанное в параметре actionName действие;

□ protocol — указывает используемый для формирования ссылки протокол  http или https;

□ hostName — указывает значение хоста, которое будет использовано для формирования ссылки;

□ fragment — указывает значение якоря, которое будет использовано для формирования ссылки. Это значение используется браузером для навигации по странице и обычно представляет собой значение идентификатора какого-либо элемента разметки, к которому следует выполнить навигацию. Данное значение будет добавлено к ссылке в следующем виде: ;

□ routeValues — указывает объект, содержащий параметры для механизма маршрутизации;

□ ajaxOptions — указывает экземпляр класса AjaxOptions с заданными свойствами, которые определяют параметры асинхронного запроса и могут определять ряд JavaScript-функций, реагирующих на изменение состояния запроса;

□ htmlAttributes — набор значений пользовательских атрибутов для тега a, которые должны быть помещены в разметку формы.

Применение ActionLink еще проще, рассмотрим его использование на примере получения даты и времени для отображения на странице:

<%= Ajax.ActioriLink(''Пaлучить время", "GetTime", "Home",

 new AjaxOptions() { UpdateTargetId = "timeText" },

 (object) null) %>

Нажмите на ссылку для получения времени

Здесь с помощью вспомогательного метода Ajax.ActionLink создается ссылка, которая с помощью Ajax.NET скрытно связывается с асинхронным запросом на сервер. Кроме текста ссылки, наименования действия и контроллера, в функцию передается набор параметров AjaxOptions, в котором, в нашем случае, параметр UpdateTargetId устанавливается равным идентификатору элемента, где будет отображен результат запроса. В последний параметр, который определяет значение атрибутов HTML-элемента, передается значение (object) null, чтобы указать, что никаких дополнительных HTML-атрибутов рендерить не нужно.

Как и в случае использования Ajax.BeginForm, при рендеринге Ajax.ActionLink незаметно для разработчика создается вспомогательный код, который реализует весь Ajax-функционал, избавляя разработчика от написания рутинного кода:

onclick="Sys.Mvc.AsyncHyperlink.handleClick(this,

});">Получить время

После того как пользователь нажмет на ссылку, сформируется асинхронный запрос на сервер, и полученный результат будет выведен в элемент span с идентификатором timeText.

IsAjaxRequest

Метод IsAjaxRequest является методом расширения для класса HttpRequestBase. Данный метод возвращает булево значение, которое сообщает, является ли текущй запрос Ajax-запросом или нет. IsAjaxRequest может быть полезен тогда, когда ваше действие меняет логику в зависимости от типа запроса. Например, в следующем примере представлена реализация действия, в котором в зависимости от типа запроса возвращается либо набор данных, либо данные с готовой HTML-разметкой:

public ActionResult GetTime()

{

  if (Request.IsAjaxRequestO)

  {

    return Json(DateTime.Now.ToString());

  } else

    return View(DateTime.Now.ToString());

}

В этой главе мы уже рассмотрели некоторые функции jQuery и пример использования, который продемонстрировал, насколько упрощает жизнь разработчиков библиотека jQuery, благодаря которой отпадает потребность писать сопутствующий код, не относящийся непосредственно к решению задачи.

Здесь мы рассмотрим все функции и события Ajax, имеющиеся в библиотеке и составляющие API jQuery по работе с асинхронными запросами. В табл. 7.2 приведен список функций Ajax-подсистемы в jQuery.

Функции для работы с Ajax

События Ajax в jQuery

Помимо функций, работающих с Ajax, в библиотеке jQuery существует ряд функций, добавляющих обработчиков к событиям, которые также относятся к сфере Ajax и вызываются в тот или иной момент работы Ajax-запросов:

□ ajaxComplete — событие, возникающее в момент завершения Ajax-запроса. Результат завершения не влияет на возникновение события. ajaxComplete будет вызвано в любом случае: был ли запрос успешен, произошла ли ошибка, исключительная ситуация или время ожидания ответа от сервера истекло;

□ ajaxError — событие, возникающее в момент завершения Ajax-запроса с ошибкой. Событие ajaxError позволяет обработать исключительную ситуацию, возникшую при выполнении запроса на сервере, или другие ситуации, когда запрос не был успешно выполнен;

□ ajaxSend — событие, возникающее непосредственно перед отправкой запроса на сервер. Событие ajaxSend часто используется для изменения состояния пользовательского интерфейса, например, для запрещения элементов, с помощью которых может быть отправлен повторный запрос. Кроме того, разработчик может использовать событие ajaxSend для отображения сообщения для пользователя о том, что запрос был отправлен на сервер;

□ ajaxstart и ajaxstop — однотипные события, которые возникают в момент старта и остановки Ajax-запросов соответственно. Могут быть использованы точно так же, как ajaxsend или ajaxComplete, однако отличаются от них отсутствием параметров с дополнительными данными;

□ ajaxSuccess — событие, возникающее в момент успешного завершения Ajax-запроса. Если Ajax-запрос был выполнен успешно и были получены данные от сервера, то вызывается событие ajaxSuccess, обработав которое разработчик может отреагировать на успешный асинхронный запрос.

Все эти события могут быть обработаны пользовательскими функциями, в которые передается от одного до четырех параметров. Не принимают параметры только функции, обрабатывающие события ajaxstart и ajaxstop. Следующие параметры используются во всех остальных функциях:

□ event — объект, содержащий информацию о событии;

□ XMLHttpRequest — объект, содержащий информацию о запросе;

□ ajaxOptions — параметры, которые были использованы для запроса.

Событие ajaxError, кроме перечисленных трех, содержит четвертый параметр:

□ thrownError — объект, который содержит информацию о произошедшей ошибке.

Использовать данные события достаточно просто. Рассмотрим пример, который выводит пользователю сообщение о старте Ajax-запроса, скрывает кнопку, для предотвращения повторного запроса, и возвращает ее после того, как запрос выполнился. Для этого модифицируем код функции GetTime и разметку так, как представлено в следующем фрагменте:

Нажмите кнопку для 3anpoca

       type="button"

       onclick="javascript:GetTime()"

       value="Получить время" />

Время не получено

Здесь представлена разметка для элемента 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. В этом примере на форме регистрации добавляется функциональность по проверке введенного нового имени пользователя на наличие в базе данных. Задача проста: проверить, не является ли имя, которое себе выбрал пользователь, уже существующим на сайте.

Первоначально создадим действие 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 ссылку для проверки введенного логина на наличие плюс поле для вывода результата проверки:

Username:

<%= Html.TextBox("username") %>

<%= Html.ValidationMessage("username") %>

<%= Ajax.ActionLink("Пpoверить доступность логина",

                 "CheckUsername",

                 new AjaxOptions {OnBegin ="CheckUsername_OnBegin"

                                 , UpdateTargetld =

                                 "check_username"}

                 )

%>

Здесь с помощью вспомогательного метода Ajax.ActionLink создается гиперссылка для вызова действия CheckUsername. C помощью создания структуры типа AjaxOptions мы задаем несколько параметров. Во-первых, мы задаем функцию CheckUsername_OnBegin, которая должна быть вызвана перед запросом, а во-вторых, указываем тег с идентификатором check_username, который должен быть использован для рендеринга результата.

К сожалению, базовый функционал ASP.NET Ajax пока не поддерживает возможность задавать динамические параметры для запросов, формируемых через Ajax.ActionLink. Поэтому, чтобы передать с запросом введенные пользователем данные, нам нужно обработать начало запроса и сформировать самостоятельно URL запроса с необходимой строкой параметров. Чтобы сделать это, мы задали функцию CheckUsername_OnBegin, код которой выглядит так:

Здесь производится получение URL запроса и формирование нового URL на базе введенных пользовательских данных. Последней строкой скрипта новый URL устанавливается для Ajax-запроса.

В итоге после компиляции на странице регистрации мы сможем увидеть рядом с полем ввода имени пользователя ссылку для проверки на допустимость такого логина (рис. 7.8). После нажатия кнопки пользователь получает результат проверки в виде строки сообщения (рис. 7.9).

Рис. 7.8. Форма регистрации с гиперссылкой на проверку доступности логина

Реализация на jQuery

Посмотрим, насколько реализация проверки на наличие логина на jQuery отличается от описанной ранее реализации на ASP.NET Ajax. Во-первых, определим гиперссылку для проверки логина пользователя:

Username:

<%= Html.TextBox("username") %>

<%= Html.ValidationMessage("username") %>

Проверить доступность логина