jQuery ajax login form with asp.net mvc

Question

I have a simple login form on my MVC app (note I'm not using the inbuilt one) which looks something like this:

@using (Html.BeginForm())
{
    <label for="UserName" class="placeholder">Email address or username</label>
    @Html.TextBoxFor(m => m.UserName)

    <label for="Password" class="placeholder">Password</label>
    @Html.PasswordFor(m => m.Password)

    <button type="submit" title="Log in">Log in &#9658;</button>
}

I have some jquery which should post the data using ajax. If the user is correct then send them off to the correct page otherwise show an error. However I'm struggling. Can anyone point me in the right direction as currently I also get the success even if the account details are incorrect and I've lost the redirect functionality on successful login due to the preventdefault.

$('form').live('submit', function (event) {

                    // Stop the form from doing a native postback
                    event.preventDefault();

                    $.ajax({
                        type: 'POST',
                        timeout: 5000,
                        url: $(this).attr('action'),
                        data: $('form').serialize(),
                        success: function (responseHtml) {
                            // what goes here... as the form is always successful even if the account details are incorrect
                        },
                        error: function (jqXHR, textStatus, errorThrown) {

                            alert('error');
                        }
                    });
                });

C#

[HttpGet]
public ActionResult Login()
{
    if (Session["UserID"] != null)
    {
        return RedirectToAction("Index", "Home", new { area = "Dashboard" });
    }

    return View();
}

[HttpPost]
public ActionResult Login(User user, string returnUrl)
{
    // Validate the email and password
    if (users.Login(user.UserName, user.Password, Request.UserHostAddress))
    {
        FormsAuthentication.SetAuthCookie(user.UserName, true);

        if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/")
            && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\"))
        {
            return Redirect(returnUrl);
        }
        else
        {
            return RedirectToAction("Index", "Home", new { area = "Dashboard" });
        }
    }
    else
    {
        return View();
    }
}

+1 nothing wrong with this question

Jan
– Jan

2011-11-08 14:10:50 +00:00
Commented Nov 8, 2011 at 14:10 — Jan
– Jan, Commented Nov 8, 2011 at 14:10

Yasser Shaikh · Accepted Answer · 2014-09-19 12:55:11Z

4

Your Action has to return data and not html because you want to use the result in your javascript callback,

For example you can return a json object with a uservalidated property like this:

[HttpPost]
public JsonResult Login(User user, string returnUrl)
{
    // Validate the email and password
    if (users.Login(user.UserName, user.Password, Request.UserHostAddress))
    {
        FormsAuthentication.SetAuthCookie(user.UserName, true);

        // build redirectUrl ...
        var redirUrl = ...
        return Json(new { uservalidated = true, url = redirUrl });
    }
    else
    {
        return Json (new { uservalidated = false, url = null });
    }
}

Your ajax call has two callbacks. The error callback is just for the case the ajax call goes wrong for some reason.

Whether a user provided correct credentials or not, you will always return to your success callback because the ajax call itself should not fail.

EDIT:

Ok, from the comments I interpolate that you want your action method to work with and without javascript enabled.

You have two possibilities:

Use two action methods - one returns JsonResult the other returns ActionResult
Use one action method that automatically detects weather its an ajax request or notand return the complete View/Redirect or the JSON Data when called via ajax.

This is an example for the latter:

[HttpPost]
public ActionResult Login(User user, string returnUrl)
{
    // do login logic like shown above.
    bool userAuthenticated = ...
    string redirectUrl = ...

    if (Request.IsAjaxRequest()) {
        return Json(new { userAuthenticated = userAuthenticated, url = redirectUrl });
    }
    else {
        return Redirect(redirectUrl);
    }        
}

The last part is how to use the returned JSON data in your javascript code. You can access it in the success callback like this:

$.ajax({
    ...
    success: function (data) {
                 if (data.userAuthenticated) {
                     window.location.href = data.url;
                 } else {
                     // show some fancy invalid credentials message...
                 }
             },
    ...

edited Sep 19, 2014 at 12:55

Yasser Shaikh

47.9k50 gold badges208 silver badges290 bronze badges

answered Nov 8, 2011 at 14:10

Jan

16.1k5 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rory McCrossan Over a year ago

I'd argue that uservalidated is a more semantic variable name than success for the JSON response - especially when you're going to be putting it in to the success handler of the ajax request, but +1 regardless as this will work perfectly.

Cameron Over a year ago

Well it still needs to be ActionResult just in case they have JS turned off!

Jan Over a year ago

When they have js turned of your ajax call will never reach the server. The action method returns just JsonResult so its not necessary to specify ActionResult as the return type.

Cameron Over a year ago

This won't work though because if the user has disabled JS then they will just get a JSON return and they can't do anything with it! Hence why I want to use ActionResult!

Cameron Over a year ago

And how would I use the JSON data?

Rory McCrossan · Accepted Answer · 2011-11-08 13:50:19Z

0

The success and failure events of the ajax call refer to the status of the ajax call itself. If the call completes, but the user was invalid, as far as the ajax call is concerned it was a success.

In the controller this ajax is posting to you need to return a flag in which ever format you prefer (text, xml, json) to state whether the login was successful.

You would then be able to access this value in your success function, as it's passed in as the responseHtml variable. If this flag show the login was correct, you can then redirect using location.assign("page.aspx") to the correct place.

answered Nov 8, 2011 at 13:50

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

Rory McCrossan Over a year ago

@Cameron See Jan's answer as he's put it in there.

Collectives™ on Stack Overflow

jQuery ajax login form with asp.net mvc

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related