Чтение онлайн

});

}

</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) {

var username = document.getElementById("username").value;

var request = data.get_request;

var url = request.get_url;

url = url + "?username=" + username;

request.set_url(url);

}

</script>

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

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

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

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

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

<label for="username">Username:</label>