Книга: ASP.NET MVC Framework

Реализация на ASP.NET 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>
  <% 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></span>
<% } %>
</div>
<p>
  Welcome <b><span></span></b>!
  [ <%= Html.ActionLink("Log Off", "LogOff", "Account") %> ]
</p>
<% } %>



Здесь в выделенном фрагменте кода с помощью вспомогательного метода Ajax.BeginForm объявляется форма для ввода данных. Устанавливаются параметры формы: действие, контроллер, которые требуется вызвать. С помощью определения экземпляра AjaxOptions определяются параметры Ajax-запроса: при успешном запросе будет вызвана JavaScript-функция onLogon, при возникновении ошибки будет вызваана другая функция — onError. Определим логику этих JavaScript-функций, которые будут реагировать на результат Ajax-запросов (листинг 7.3).

Листинг 7.3. JavaScript-код для реагирования на события

<script type="text/javascript">
  function OnLogon(result) {
    var response = result.get_response();
    var resString = response.get_responseData();
    var resultData = Sys.Serialization
       .JavaScriptSerializer.deserialize(resString) ;
    if (resultData.IsSuccess) {
      document.getElementById('loginPanel').style.display = 'none';
      document.getElementById('logoutPanel').style.display = '';
      var username = document.getElementById('userName');
      document.getElementById('username')
          .innerHTML = "<b>" + username.value + "</b>";
    } else {
      document.getElementById('message')
         .innerText = resultData.ErrorString;
    }
  }
  function OnError(result) {
    alert(result);
  }
</script>

Здесь определяются две JavaScript-функции: OnLogon и OnError. Первая функция предназначена для обработки результата успешного выполнения авторизации. Функция OnLogon принимает один параметр — result, который содержит результат выполнения запроса и дополнительные данные. Для получения JSON-данных, которые были получены от действия LogOn, в функции OnLogon используются сужебные функции ASP.NET Ajax:

? get_response — возвращает объект с данными ответа от сервера;

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

? Sys.Serialization.JavaScriptSerializer.deserialize — преобразует строку с JSON-данными в объект с соответствующими полями.

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

Оглавление книги