Creating a ajax login dialog box with MVC 3 and jQueryUI

Question

I'm using Asp.Net MVC 3 (with Razor) and jQuery/jQueryUI to create a dialog login box. I'm still quite new to these technologies and have run into a problem.

The login form is in a partial view, I use the following jQuery code to load it into the page:

 $('#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, has the path for the Logon action method in the controller.

The partial view with the login form looks along these lines:

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

Here's the code for the controller:

[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);
    }

This all works fine, however the problem I'm having, is that when the user is authenticated, as can be seen in the controller code. I try to RedirectToAction("Index", "Home"), this with the intent that the page should reload with the user logged in and the dialog closed.

However at the moment, just the login dialog box reloads with the whole page content in it. I understand that this is probably normal behavior, as I'm telling the form in the logon view to update the UpdateTargetId of the dialog box.

So the question is, can I reach my desired result of the whole page reloading and if so, how??

Any help and hints would be most appreciated.

/Ola

score 0 · Answer 1 · answered Apr 18 '12 at 04:06

I noticed it's an old question, but I hope my reply may help to someone. For something similar I redirected to a 'helper' page in the controller action, which contained (for me almost) only some JavaScript in the scipt tag (or you should link it of course). In this case that's enough:

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

...and I also find and close the dialog there:

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

For me it was well, but I also appreciate better solutions.

Baz1nga · Answer 2 · 2011-08-12T07:13:26.947

0

Instead of using a form parameter you can use jquerys ajax method and send in the username and password and in the success function of the ajax method if the user is successfully authenticated redirect the user to your index page.

note the index page should still have a way to determine that the user is authenticated or not else anyone can typein the url.

What do you think?

edited Aug 12 '11 at 07:13

answered Aug 12 '11 at 07:02

Baz1nga

15,485
3
35
61

The benefit of using the form is that in Asp.Net MVC, it passes back all sort of validation info all by itself. If you'd go with your suggestion, you'd have to do that all yourself right? – Ola Karlsson Aug 12 '11 at 08:02
FYI there are lots of jquery libraries for validation built for you too.. like http://docs.jquery.com/Plugins/validation or for more details: http://zoomzum.com/useful-jquery-form-validation/ – Baz1nga Aug 12 '11 at 09:50

score 0 · Answer 3 · edited May 23 '17 at 12:21

~~On your .load ajax call, the data that is returned contains redirect information. I'm not sure if this is only for JSON POSTS, but it's worth a try:~~

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

Update:

The callback event that you need to hook onto is the one that submits the login information, not the one that loads the login page. I asked you to hook onto the wrong ajax call on top, the one you need to latch onto is this one:

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

Unfortunately, I do not know how to hook onto that event. This article may help: How to get an ASP.NET MVC Ajax response to redirect to new page instead of inserting view into UpdateTargetId?

Nope, doesn't seem to work. The callback from the load doesn't even get hit when I post the form from inside the dialog box. — Ola Karlsson, Aug 12 '11 at 07:59
I gave you bad information. I was asking you to hook onto the ajax event that loaded the form instead of hooking onto the ajax event that was submitting the form. — rkw, Aug 12 '11 at 16:57

Creating a ajax login dialog box with MVC 3 and jQueryUI

3 Answers3