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

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

<div id="loginPanel">

  <form id="loginForm" method="post" action="Account/LogOn">

    Логин: <input id="userName" type="text" />

    Пароль: <input id="password" type="password" />

    <input id="RememberMe" type="checkbox" />

    запомнить <input type="submit" value="Логин" /><br/>

    <span id="message"></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-запроса. Эта функция определяет обработку результата запроса и выводит либо сообщение об ошибке, либо приглашения для пользователя, в случае когда вход в систему был произведен удачно.