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>

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

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

<a id="checkUsername" href="#">Проверить доступность логина</а>

<span id="check_username"></span>

Как можно заметить, определение гиперссылки является простым определением разметки, которая ничем не отличается от обычной. Основная работа ложится на код JavaScript, который представлен далее:

<script type="text/javascript">

  $(document).ready(function() {

    $("#checkUsername").bind("click",

      function() {

        var username = $("#username").val();

        $("#check_username")

             .load("/Account/CheckUsername?username=" + username);

    })

  });

</script>

Здесь мы объявляем глобальный обработчик, который выполнится после загрузки документа $(document).ready (...). В этом обработчике мы задаем поведение для обработки нажатия пользователя на необходимую нам ссылку с идентификатором $("#checkUsername").bind("click", ...). В самом обработчике нажатия производятся следующие действия: получается значение введенного пользователем логина и с помощью функции load производится запрос на сервер для проверки пользовательских данных.

Нетрудно заметить, что в случае с jQuery нам пришлось произвести меньше действий. Во-первых, вместо определения серверного кода с определением Ajax.ActionLink мы сформировали с помощью HTML-разметки обыкновенную ссылку. Во-вторых, для передачи параметра с пользовательскими данными в случае jQuery нам не пришлось работать с внутренними объектами ASP.NET Ajax, вместо этого мы работали со ссылкой напрямую, сформировав ссылку для запроса обыкновенным сложением строк. И в-третьих, само количество кода для jQuery оказалось меньшим, чем потребовалось написать кода для ASP.NET Ajax.

Примечание

Следует заметить, что передача на сервер пользовательского ввода всегда сопряжена с опасностью. Злоумышленник может ввести в виде текста опасный код, например кусок SQL-кода или JavaScript-кода, который затем, в случае когда не проводится проверка пользовательского ввода, будет исполнен вашим сервером или браузером на компьютерах ваших пользователей. Чтобы избежать этого, необходимо всегда обрабатывать пользовательский ввод и учитывать его потенциальную опасность.

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

Пример 2. Логин через Ajax

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

Первоначально переопределим действие LogOn в контроллере Account так, чтобы поддержать возможность произведения входа в систему черезе Ajax-запросы (листинг 7.2).

Листинг 7.2. Переопределение действия LogOn

public ActionResult LogOn(string userName,

          string password,

          bool rememberMe,

          string returnUrl)

{

  if (Request.IsAjaxRequest())

  {

    var result = new AjaxResult();

    if (!ValidateLogOn(userName, password))

    {

      result.IsSuccess = false;

      result.ErrorString = "введен неверный логин или пароль";

      return Json(result);

    }

    FormsAuth.SignIn(userName, rememberMe);

    result.IsSuccess = true; return Json(result);

  }

  else

  {

    if (!ValidateLogOn(userName, password))

    {

      return View();

    }

    FormsAuth.SignIn(userName, rememberMe);

    if (!String.IsNullOrEmpty(returnUrl))

    {

      return Redirect(returnUrl);

    }

    else

    {

      return RedirectToAction("Index", "Home");

    }

  }

}

Обратите внимание на выделенный в листинге 7.2 фрагмент. В нем используется метод Request.IsAjaxRequest() для определения типа запроса. Если запрос был произведен с помощью Ajax, то выполнятся дальнейшая обработка и возврат результата в виде JSON-данных с булевым значением, описывающим, произведен ли вход в систему, и строкой описания ошибки, если она возникла. Когда запрос не является Ajax-запросом, выполняется предыдущая логика.

Реализация на ASP.NET Ajax

Сделаем так, чтобы вход в систему был возможен на любой странице проекта (рис. 7.10). Для этого добавим разметку, необходимую для отображения элементов управления входа в систему, в элемент управления LogOnUserControl.ascx:

<% if (Request.IsAuthenticated) { %>

  Welcome <b><%= Html.Encode(Page.User.Identity.Name) %></b>!

  [ <%= Html.ActionLink("Log Off", "LogOff", "Account") %> ]

<% } else { %>

  <div id="loginPanel">

  <% using(Ajax.BeginForm("LogOn", "Account",

     (object) null,

     new AjaxOptions{OnSuccess = "OnLogon",

       OnFailure = "OnError"})) {%>

 Логин: <%= HtmL.TextBoxC'userNams'') %>

 Пароль: <%= Html.Password ("password") %>

 <%= HtmL.CheckBox("RememberMe") %> запомнить <input type^'submit" vaLue="Логин" /><br/>

 <span id="message"></span>

<% } %>

</div>

<p id="logoutPanel" style="display: none;">

  Welcome <b><span id="username"></span></b>!

  [ <%= Html.ActionLink("Log Off", "LogOff", "Account") %> ]

</p>

<% } %>