Шрифт:
***********************************
Пример 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") %> ]
<% } %>
Здесь в выделенном фрагменте кода с помощью вспомогательного метода 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 = '';