Ajax-login форма.

Куча теории, пора бы и к практике переходить. Создадим вторую форму входа, которая будет способствовать быстрому входу на сайте. При клике на «Вход» мы переходим не на страницу Входа, вместо нее выскакивает попапокошко с предложением ввести логин прямо сейчас. При ошибочном вводе, форма выдает предупреждение. Обычную форму по адресу /Login оставляем, она нам понадобится.

Попап формы могут использоваться часто, так что будем считать это стандартной процедурой – вызвать Popup по адресу такому-то. Так как попап – всегда один, то создадим для него контейнер в _Layout.cshtml (/Areas/Default/Views/Shared/_Layout.cshtml):

< div id=" PopupWrapper" > < /div>

Добавим функциональность в common.js (/Scripts/common.js):

this.showPopup = function (url, callback)

{

$.ajax({

type: " GET",

url: url,

success: function (data)

{

$(".modal-backdrop").remove();

var popupWrapper = $(" #PopupWrapper");

popupWrapper.empty();

popupWrapper.html(data);

var popup = $(".modal", popupWrapper);

$(".modal", popupWrapper).modal();

callback(popup);

}

});

}

, где.modal() – это функция из bootstrap.js.

Так как Вход у нас на каждой странице, то следущую функциональность добавляем тоже в common.js:

this.init = function () {

$(" #LoginPopup").click(function () {

_this.showPopup(" /Login/Ajax", function (modal)

{

});

});

}

Добавим в контроллере обработчик (/Areas/Default/Controller/LoginController.cs):

[HttpGet]

public ActionResult Ajax()

{

return View(new LoginView());

}

[HttpPost]

public ActionResult Ajax(LoginView loginView)

{

if (ModelState.IsValid)

{

var user = Auth.Login(loginView.Email, loginView.Password, loginView.IsPersistent);

if (user! = null)

{

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

}

ModelState[" Password" ].Errors.Add(" Пароли не совпадают");

}

return View(loginView);

}

Он полностью аналогичен Index, только будет вызываться другой View – «Ajax», создадим его (/Areas/Default/Views/Login/Ajax.cshtml):

@model LessonProject.Models.ViewModels.LoginView

< div class=" modal hide fade" tabindex=" -1" role=" dialog" aria-hidden=" true" >

< div class=" modal-header" >

< button type=" button" class=" close" data-dismiss=" modal" aria-hidden=" true" > × < /button>

< h3 id=" myModalLabel" > Login< /h3>

< /div>

< div class=" modal-body" >

@using (Html.BeginForm(" Ajax", " Login", FormMethod.Post, new { @class = " form-horizontal", id = " LoginForm" }))

{

< fieldset>

< legend> Вход< /legend>

< div class=" control-group" >

< label class=" control-label" for=" Email" >

Email< /label>

< div class=" controls" >

@Html.TextBox(" Email", Model.Email, new { @class = " input-xlarge" })

< p class=" help-block" > Введите Email< /p>

@Html.ValidationMessage(" Email")

< /div>

< /div>

< div class=" control-group" >

< label class=" control-label" for=" Password" >

Пароль< /label>

< div class=" controls" >

@Html.Password(" Password", Model.Password, new { @class = " input-xlarge" })

@Html.ValidationMessage(" Password")

< /div>

< /div>

< /fieldset>

}

< /div>

< div class=" modal-footer" >

< button class=" btn" data-dismiss=" modal" aria-hidden=" true" > Close< /button>

< button class=" btn btn-primary" id=" LoginButton" > Login< /button>

< /div>

< /div>

Обратите внимание на id формы LoginForm и id кнопки LoginButton

Изменим вызов в UserLogin.cshtml (/Areas/Default/Views/Home/UserLogin.cshtml):

< li> < span class=" btn btn-link" id=" LoginPopup" > Вход< /span> < /li>

В common.js добавим обработку LoginButton, при вызове установим обработчик события на $(“#LoginButton”).click(…) (/Scripts/common.js):

this.init = function () {

$(" #LoginPopup").click(function () {

_this.showPopup(" /Login/Ajax", initLoginPopup);

});

}

…

function initLoginPopup(modal) {

$(" #LoginButton").click(function () {

$.ajax({

type: " POST",

url: " /Login/Ajax",

data: $(" #LoginForm").serialize(),

success: function (data) {

showModalData(data);

initLoginPopup(modal);

}

});

});

}

function showModalData(data, callback) {

$(".modal-backdrop").remove();

var popupWrapper = $(" #PopupWrapper");

popupWrapper.empty();

popupWrapper.html(data);

var popup = $(".modal", popupWrapper);

$(".modal", popupWrapper).modal();

if (callback! = undefined) {

callback(popup);

}

}

Обратите внимание на рекурсивный вызов initLoginPopup. И тут заключается дилемма. Так как при удачном входе нам не надо чтобы в PopupWrapper грузилась новая страница (или страница с ошибкой), а только чтобы страница обновилась.

Для этого сделаем хитрость. В /Areas/Default/Views/Shared/ добавим _Ok.cshtml, суть которого - перезагружать страницу:

< script>

window.location.reload();

< /script>

При удачном входе мы загружаем этот View. При добавлении в дерево DOM в строке

popupWrapper.html(data);

скрипт запустится и перезагрузит страницу, не дожидаясь остальных вызовов. Изменим контроллер (/Areas/Default/Controllers/LoginController.cs):

var user = Auth.Login(loginView.Email, loginView.Password, loginView.IsPersistent);

if (user! = null)

{

return View(" _Ok");

}

Проверяем, работает!

Итог

Мы рассмотрели основные принципы верстки и клиентской части, но это лишь малая толика того, что вообще можно знать о верстке, стилях и программировании в клиентской части.

Мы научились пользоваться отладчиком в Chrome и создавать ajax запрос. Подробнее рассмотрите этот вопрос в дальнейшем.

Полезные ссылки:

https://jquery.com

https://habrahabr.ru/post/161895/

https://habrahabr.ru/post/154687/

https://twitter.github.com/bootstrap/

https://habrahabr.ru/post/160177/