jQuery Forms Authentication with ASP.NET MVC

Question

Is it possible to use a jQuery ajax call to perform Forms Authentication with ASP.NET MVC? I\'ve been unable to find any such examples.

More specifically, how do I

Answer 1

Yes, it's possible. Just submit the login-form using the method described here by mike bosch and return a json datastructure with the returnUrl if any.

I have created a lightweight LoginResultDTO class that i return as json:

public class LoginResultDTO
{
  public bool Success {get;set;}
  public string Message {get;set;}
  public string ReturnUrl {get;set;}
}

Here's a script block from my LogOn view:

<script type="text/javascript">
        $(document).ready(function() {
            var form = $($("form")[0]);
            form.submit(function() {
                var data = form.serialize();
                $.post(form.attr("action"), data, function(result, status) {
                    if (result.Success && result.ReturnUrl) {
                            location.href = result.ReturnUrl;
                    } else {
                        alert(result.Message);
                    }
                }, "json");
                return false;
            });
        });
</script>

This will ajax wrap the logon form. Note that this is the simplest implementation of the javascript code possible but it's a place to start.

Then I have modified my LogOn action in the AccountController and in the relevant places put something like this:

if(Request.IsAjaxRequest())
{
  return Json(new LoginResultDTO{Success=true,Message="Successfully logged in"});
}else
{
  return View();
}

So this is an ultralight but rather complete version of how jquery authentication could be done in asp.net mvc.

Answer 2

Take a look at xVal. It can use any client-side validation library but uses jQuery Valiation by default.