Книга: ASP.NET MVC Framework

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

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

Для реализации поставленной задачи с помощью jQuery необходимо определить следующую разметку элементов управления:

<div>
  <form method="post" action="Account/LogOn">
    Логин: <input type="text" />
    Пароль: <input type="password" />
    <input type="checkbox" />
    запомнить <input type="submit" value="Логин" /><br/>
    <span></span>
  </form>
</div>

Здесь определена стандартная форма для отправки данных на сервер. Для обработки работы формы и формирования Ajax-запроса необходимо переопределить поведение формы с помощью JavaScript. Далее представлен фрагмент кода, определяющий логику работы формы:

<script type="text/javascript">
  $('document').ready(function() {
    $('#loginForm').submit(function(event) {
      var postData = new Object();
      postData.userName = $('#userName').val();
      postData.password = $('#password').val();
      postData.rememberMe = $('#RememberMe').is(':checked');
      $.post('Account/LogOn',
        postData,
        function OnResult(result) {
          if (result.IsSuccess) {
            $('#loginPanel').hide();
            $('#logoutPanel').show();
            var username = $('#userName').val();
            $('#username')
               .html("<b>" + username + "</b>");
          } else {
            $('#message').text(result.ErrorString);
          }
        },
        'json');
      event.preventDefault();
    })
  });
</script>

Здесь определяется обработчик окончания загрузки документа, который после загрузки сайта в браузере у клиента выполнит необходимые привязки к разметке. Так, с помощью $('#loginForm').submit определяется функция, которая будет вызвана в момент, когда данные с формы будут передаваться на сервер. Обратите внимание на параметр event этой функции. После определения своей логики поведения при отправке данных с формы мы вызываем event.preventDefault(), который предотвращает поведение по умолчанию, т. е. позволяет нам отменить отправку данных с формы стандартным путем.

Для отправки данных мы используем функцию $.post, передав в нее предварительно сформированные данные, полученные с элементов управления. При вызове $.post мы определяем функцию OnResult, которая должна быть вызвана после завершения Ajax-запроса. Эта функция определяет обработку результата запроса и выводит либо сообщение об ошибке, либо приглашения для пользователя, в случае когда вход в систему был произведен удачно.

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