Текст книги "Asp.net mvc framework"

onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"

onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this,

new Sys.UI.DomEvent(event), {

  insertionMode:Sys.Mvc.InsertionMode.replace,

  updateTargetId:'loginStatus'

});">

Как можно видеть, вызов Ajax.BeginForm сгенерировал код для функционала, который предлагают библиотеки MicrosoftAjax.js и MicrosoftMvcAjax.js.

Ajax.ActionLink

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

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

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

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

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

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

□ fragment – указывает значение якоря, которое будет использовано для формирования ссылки. Это значение используется браузером для навигации по странице и обычно представляет собой значение идентификатора какого-либо элемента разметки, к которому следует выполнить навигацию. Данное значение будет добавлено к ссылке в следующем виде: http://localhost/Home/GetTime#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 стала частью пакета Visual Studio. В среде разработчиков, работающих с JavaScript, jQuery зарекомендовала себя очень хорошо, и разработчики пакета Visual Studio решили не изобретать свой вариант JavaScript-библиотеки для работы с селекторами и DOM-моделью документа, когда встал такой вопрос, а взять готовый мощный отлаженный и знакомый многим разработчикам инструмент.

Одна из самых главных возможностей, которую предлагает jQuery, – это написание JavaScript-кода для работы с объектной моделью документа, основанного на селекторах CSS3. Селекторы CSS3 – это возможность назначить CSS-стиль не просто отдельному элементу в документе по его классу или идентификатору, но выбрать целый ряд элементов согласно некому общему признаку. Например, следующий CSS-код устанавливает стиль всем вложенным элементам li относительно элементов с классом . list:

.list > li {

  color: #FFFFFF;

}

CSS-селекторы содержат гибкие варианты и операторы для доступа к элементам DOM для самых различных сценариев. Поддержка CSS-селекторов библиотекой jQuery означает, что вы получаете возможность проще выбирать часть объектов модели документа, используя знакомый CSS-синтаксис и минимум кода.

Примечание

Описание CSS-селекторов выходит за рамки этой статьи. Достаточно сказать лишь, что это важнейший и мощный инструмент по работе с DOM-моделью документа, и jQuery позволяет работать с dom на базе набора последней, третьей версии CSS-селекторов.

*********************************

Библиотека jQuery представлена в Visual Studio двумя JS-файлами: jquery-1.3.1js и jquery-1.3.1.min.js (на момент написания книги). Эти файлы идентичны по функционалу и отличаются только тем, что второй вариант минимизирован, т. е. текст его максимально оптимизирован для уменьшения размера (убраны переносы, лишние пробелы и выполнены другие оптимизации). Обычно первый вариант библиотеки используют при разработке и отладке, поскольку, кроме читаемого кода, библиотека содержит массу полезных комментариев. Второй вариант, специально уменьшенный, используется уже на реальном применении.

Для упрощения работы с библиотекой Visual Studio содержит специальные файлы *– vsdocjs, которые необходимы для поддержки IntelliSense при работе с функциями и свойствами jQuery. Чтобы использовать эти файлы, вам необходимо иметь Visual Studio 2008 с первым сервис-паком и установленным обновлением VS90SP1-KB958502-x86. Если у вас установлено это обновление, то после подключения скрипта jQuery к странице через тег script, вы получите возможность работать с функциями и свойствами библиотеки jQuery с помощью IntelliSense (рис. 7.5).

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

□ jQuery.ajax – выполняет Ajax-запрос на сервер;

□ load – выполняет Ajax-запрос на сервер и вставляет результат в DOM страницы;

□ jQuery.get – упрощенная версия jQuery.ajax, которая позволяет посылать GET-запросы на сервер с помощью Ajax;

□ jQuery .getJSON – версия jQuery.get, которая загружает с сервера данные в формате JSON с помощью Ajax-запросов;

□ jQuery.getscript – загружает с помощью Ajax текст JavaScript-кода и исполняет его;

□ jQuery.post – загружает данные с сервера с использованием Ajax и POST-запроса.

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

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

Сравните JavaScript-реализацию без вспомогательных библиотек с 20 строками и jQuery с шестью. Разница очевидна: использование jQuery не требует ни организации поддержки всех браузеров, ни обработки получения результата и состояния запроса. Все это низкоуровневое взаимодействие jQuery берет на себя. В приведенном примере использована функция jQuery $.get ($ – это синоним объекта jQuery). В функцию get передаются следующие параметры:

□ строка с адресом запроса;

□ null – как значение данных, передаваемых на сервер;

□ функция обратного вызова, которая будет вызвана в случае завершения запроса;

□ строковый параметр со значением "text", определяющий тип данных ожидаемого результата запроса (в данном случае – обычный текст).

Очевидно, что использование jQuery способно существенно сократить время, требующееся на создание клиентского кода, в том числе для реализации Ajax-функционала.

MVC Framework содержит все необходимое для поддержки разработчиков в их стремлении делать современные веб-проекты с использованием технологий Ajax. Включенная во Framework библиотека jQuery позволяет работать с клиентским кодом и JavaScript и гораздо проще организовывать Ajax-запросы. Встроенные средства MVC Framework и AJAX.NET позволяют вывести работу с Ajax на новый уровень абстракции, который позволяет меньше заботиться о написании JavaScript и дает возможность разработчику сосредоточиться на решении задачи вместо того, чтобы организовывать низкоуровневые взаимодействия между разметкой и асинхронными запросами к серверу.

Библиотека jQuery

jQuery – это сторонняя для Visual Studio JavaScript-библиотека, которую разработал Джон Ресиг, евангелист организации Mozilla Foundation, которая выпускает популярный браузер Firefox. Библиотека jQuery была выпущена в начале 2006 года и очень быстро завоевала популярность среди разработчиков в связи со своей простотой и в то же время чрезвычайно сильными возможностями. Ее основное назначение – это упрощенная работа с DOM-элементами документа. Библиотека так построена, что в JavaScript стало возможным использовать для выборки и работы с элементами HTML-страницы селекторы, соответствующие CSS3-селекторам. Это позволяет значительно упростить работу с HTML, создание анимации и динамического изменения разметки.

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

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

jQuery API

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

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

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

jQuery.ajax

Функция предназначена для организации Ajax-запросов и представляет собой самый активный элемент jQuery API, но в то же время самый низкоуровневый. jQuery.ajax принимает один-единственный параметр – структуру данных, которая описывает все, что необходимо для организации асинхронного запроса. Структура данных может содержать следующие поля:

□ async – булево значение, определяющее, будет ли запрос асинхронным. По умолчанию async=true;

□ beforeSend – определяет функцию, которая будет вызвана перед отправкой асинхронного запроса. Этой функции передается единственный параметр текущий объект XMLHttpRequest;

□ cache – позволяет управлять кэшированием страниц, по умолчанию установлено cache=true;

□ complete – определяет функцию, которая вызывается в момент завершения запроса, в том числе в случае неудачного запроса. В функцию передается два параметра: текущий объект XMLHttpRequest и строка, которая указывает статус завершения запроса;

□ contentType – определяет строковое значение типа данных запроса (HTTP-заголовок content-type). По умолчанию значение устанавливается в application/x-www-form-urlencoded;

□ data – данные, представленные объектом или строкой, которые должны быть отправлены на сервер вместе с запросом;

□ dataFilter – определяет функцию, которая вызывается для полученных в результате запроса данных. Подразумевается, что данная функция проведет проверку данных и приведет их в безопасный для использования на стороне клиента вид. Функция принимает два параметра: собственно принятые с сервера данные и строковое значение типа данных;

□ dataType – строка, определяющая тип данных, который ожидается в результате запроса. В зависимости от некоторых условий по умолчанию значение этого параметра устанавливается в "xml" или "html";

□ error – определяет функцию, которая будет вызвана в случае возникновения какой-либо ошибки при выполнении асинхронного запроса. Функция принимает три параметра: текущий объект XMLHttpRequest, строку с описанием типа ошибки и опциональный объект с описанием исключения, если оно было вызвано;

□ global – булево значение, которое определяет, должно ли выполнение этого запроса быть глобальным, что приводит к реагированию на него функций, или вызов не должен вызывать глобальные события. По умолчанию global=true;

□ ifModified – булево значение, которое указывает, что запрос должен считаться только тогда, когда возвращенные данные отличаются с момента прошлого запроса. По умолчанию ifModified=false;

□ password – строка, содержащая пароль, который будет использован в случае, когда производится запрос с обязательной аутентификацией;

□ processData – булево значение, которое определяет, необходимо ли производить обработку отправляемых данных из объектного представления в строковое. По умолчанию установлено processData=true;

□ success – определяет функцию, которая будет вызвана в случае, если запрос успешно завершится. Функция принимает два параметра: объект, содержащий полученные от сервера данные, и строковое значение, указывающее статус результата запроса;

□ timeout – числовое значение, которое определяет время ожидания ответа от сервера, по истечении которого запрос будет считаться завершившимся с ошибкой;

□ type – строка, определяющая типа запроса (GET или POST), по умолчанию type="GET";

□ url – строка, определяющая адрес, к которому отправляется запрос. По умолчанию подразумевается текущая страница;

□ username – строка, определяющая имя пользователя, которое будет использовано в случае, когда производится запрос с обязательной аутентификацией;

□ xhr – определяет функцию, которая должна создавать объект XMLHttpRequest. По умолчанию функция создает такой объект через ActiveXObject, если это возможно, если нет, то используется объект XMLHttpRequest. Вы можете переопределить эту функцию для собственной реализации создания объекта XMLHttpRequest.

Как можно заметить, функция jQuery.ajax обладает очень большим количеством настроек. Однако, в связи с тем, что практически все они имеют значения по умолчанию, использование jQuery.ajax не представляет собой особой сложности. Так, далее представлен вариант запроса значения даты и времени с сервера с помощью jQuery.ajax:

При всем перечисленном количестве возможных параметров для функции jQuery.ajax использование ее не вызывает труда. Достаточно указать всего лишь три параметра: адрес, обработчик результата и ожидаемый тип результата. Этого достаточно в нашем случае для простейшего асинхронного запроса.

load

Данная функция применяется для уже готового результата селектора jQuery и предназначена для того, чтобы запросить с сервера HTML-код и внедрить его в выбранные ранее объекты. Функция содержит три параметра:

□ url – строка адреса для запроса на сервер. Данная строка может содержать любой допустимый селектор для фильтрации результатов запроса. Например, строка "Home/GetTime span.timeData" отправит запрос по адресу Home/GetTime, но результат запроса будет отфильтрован – из него будет выбран элемент (или элементы) span с CSS-классом timeData;

□ data (необязательно) – параметры запроса, которые следует отправить на сервер. Параметры могут быть представлены в двух видах. В первом случае, когда параметр представлен в виде строки, формируется GET-запрос. Во втором случае, когда параметры представлены в виде объектов и пар "ключ/значение", формируется POST-запрос;

□ callback (необязательно) – определяет функцию, которая будет вызвана после завершения запроса, удачного либо нет. Функция содержит три параметра: текст ответа, тип данных ответа и объект XMLHttpRequest.

Следующий пример загрузит значение времени в элемент с индентификатором timeText:

Как можно убедиться, асинхронный запрос и изменение значения элемента HTML-разметки уместилось всего в одной строке. Это крайне удобно в ряде случаев.

jQuery.get и jQuery.post

Данные функции являются упрощенными и более высокоуровневыми вариантами функции jQuery.ajax. Каждая из функций принимает четыре параметра:

□ url – строка адреса для запроса на сервер;

□ data (необязательно) – данные для отправления на сервер;

□ callback (необязательно) – определяет функцию, которая вызывается после завершения выполнения асинхронной операции;

□ type (необязательно) – строка, определяющая тип ожидаемых данных с сервера. Может принимать одно из следующих значений: "xml", "html", "script","json", "jsonp" или "text".

Применение этих функций вместо более комплексной jQuery.ajax оправдано в большинстве случаев. Различие между jQuery.get и jQuery.post только одно: первая выполняет GET-запрос, вторая – POST.

jQuery. getJSON

Функция jQuery.getJSON предназначена для упрощения работы с данными в формате JSON и получения их через Ajax. jQuery.getJSON поддерживает также работу с JSONP. Функция содержит три знакомых нам параметра:

□ url – строка адреса для запроса на сервер. Для сайтов, которые поддерживают JSONP, в этом параметре можно указать параметр callback=?, чтобы иметь возможность обратиться с Ajax-запросом к домену, отличному от текущего домена сервера;

□ data (необязательно) – параметры, которые необходимо отправить на сервер;

□ callback (необязательно) – определяет функцию, которая должна быть вызвана после завершения запроса.

Использование jQuery.getJSON оправдано в случаях, когда реализуется взаимодействие с сервером, в котором достоверно известно, что обмен данными будет производиться только на базе формата JSON.

jQuery.getScript

Функция jQuery.getScript предназначена для асинхронных запросов, результатами которых являются JavaScript-фрагменты кода. После получения такого фрагмента jQuery.getScript выполняет полученный код. Функция содержит всего два параметра:

□ url – строка адреса для запроса на сервер;

□ callback (необязательно) – определяет функцию, которая должна быть вызвана после завершения запроса, загрузки и выполнения JavaScript-фрагмента.

Использование jQuery.getScript не является самым распространенным вариантом асинхронных запросов. Однако эта функция может быть полезна в тех случаях, когда требуется динамически подгружать JavaScript-функционал.

jQuery. ajaxSetup

Функция jQuery.ajaxSetup не является функцией, которая взаимодействует с сервером или занимается посылкой данных. Вместо этого jQuery.ajaxSetup предназначена для инициализации параметров, используемых по умолчанию при вызовах jQuery.ajax. Функция принимает только один параметр: options – структура данных, которая описывает все, что необходимо для организации асинхронного запроса. Возможные параметры структуры и их значения описаны вместе с описанием функции jQuery.ajax.

Например, чтобы изменить поведение по умолчанию для jQuery.ajax, чтобы вместо GET-запросов по умолчанию производились POST-запросы, необходимо вызвать следующий код:

$.ajaxSetup({ type: «POST» });

После этого все вызовы jQuery.ajax по умолчанию будут создавать POST-запросы. jQuery.ajaxSetup крайне полезна для инициализации сценария клиентской страницы, когда вместо того, чтобы передавать однотипные параметры с каждым вызовом 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 и 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 ссылку для проверки введенного логина на наличие плюс поле для вывода результата проверки:

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") %>

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