Создание диалогового окна входа в ajax с помощью MVC 3 и jQueryUI

Question

Я использую Asp.Net MVC 3 (с Razor) и jQuery / jQueryUI для создания диалогового окна входа в систему. Я все еще плохо знаком с этими технологиями и столкнулся с проблемой.

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

 $('#log-in').click(function () {
        if (ServerModel.UserId == 0) {//User not logged in, open login dialog
            $("<div></div>")
            .addClass("dialog")
            .addClass("form-dialog")
            .attr("id", "login-dialog")
            .appendTo("body")
            .dialog({
                title: 'LOGIN',
                close: function () { $(this).remove() },
                modal: true,
                width: 323,
                resizable: false
            })
            .load(ActionUrls.LogOn);
        }
    });

ActionUrls.LogOn, содержит путь для метода действия Logon в контроллере.

Частичный вид с формой входа выглядит следующим образом:

    @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "login-dialog" }))
{    
    //Login form fileds in here with submit button at the end
}

Вот код для контроллера:

[HttpGet]
    public ActionResult LogOn()
    {
       return PartialView("_Logon");
    }

    [HttpPost]
    public ActionResult LogOn(LogOnModel model)
    {
        if (ModelState.IsValid)
        {
            CustomSqlMembershipProvider provider = new CustomSqlMembershipProvider();

            if (provider.ValidateUser(model.UserName, Security.ComputeHash(model.Password)))
            {
                FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
                return RedirectToAction("Index", "Home");                    
            }
            else
            {
                ModelState.AddModelError("", "The user name or password provided is incorrect.");
            }
        }

        // something failed, redisplay partial view with the model
        return PartialView("_Logon", model);
    }

Это все работает нормально, однако проблема, с которой я столкнулся, заключается в том, что, когда пользователь проходит аутентификацию, как видно из кода контроллера. Я пытаюсь выполнить RedirectToAction («Index», «Home»), с намерением перезагрузить страницу, когда пользователь вошел в систему и диалоговое окно закрылось.

Однако на данный момент, просто диалоговое окно входа в систему перезагружается со всем содержимым страницы в нем. Я понимаю, что это, вероятно, нормальное поведение, так как я говорю форме в представлении входа в систему обновить UpdateTargetId диалогового окна.

Итак, вопрос в том, могу ли я достичь желаемого результата перезагрузки всей страницы, и если да, то как?

Любая помощь и советы будут наиболее ценными.

* * Тысяча двадцать-один / Ола * * тысяча двадцать-два

Answer 1

При вашем вызове .load ajax возвращаемые данные содержат информацию о перенаправлении. Я не уверен, что это только для JSON POSTS, но стоит попробовать:

...
.load(ActionUrls.LogOn, function(data) {
    if (data.redirect) {
        window.location.href = data.redirect;
    else {
        // other
    }
});

Обновление:

Событие обратного вызова, которое вам нужно подключить, - это то, которое передает информацию для входа, а не то, которое загружает страницу входа. Я попросил вас подключиться к неправильному вызову ajax сверху, вот что вам нужно зафиксировать:

@using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "login-dialog" }))
{    
    //Login form fileds in here with submit button at the end
}

К сожалению, я не знаю, как подключиться к этому событию. Эта статья может помочь: Как получить ответ ASP.NET MVC Ajax для перенаправления на новую страницу вместо вставки представления в UpdateTargetId?

Answer 2

Я заметил, что это старый вопрос, но я надеюсь, что мой ответ может кому-то помочь. Для чего-то подобного я перенаправил на «вспомогательную» страницу в действии контроллера, которая содержала (для меня почти) только некоторый JavaScript в теге scipt (или вы, конечно, должны связать его). В этом случае этого достаточно:

window.location.href = "http://www.foo.com";

... и я также нахожу и закрываю там диалог:

$('#login-dialog').dialog('close');

Для меня это было хорошо, но я также ценю лучшие решения.

Answer 3

Вместо использования параметра формы вы можете использовать метод jquerys ajax и отправлять имя пользователя и пароль и в функцию успеха метода ajax, если пользователь успешно прошел аутентификацию redirect пользователь на вашей странице индекса.

обратите внимание, что на индексной странице все еще должен быть способ определить, аутентифицирован ли пользователь или никто другой не может ввести URL-адрес.

Что ты думаешь?