Use of Ajax to call login functionality in an ASP .Net MVC 4 partial view

Question

Before I ask the question let me just clarify that the objective of this exercise is research/proof of concept so answers about how the design could be improved or that there are easier ways to accomplish this, though appreciated, might not help to fulfill the objective.

I am modifying the template of an ASP .Net MVC 4 application so the log in functionality is implemented with an ajax request that only updates the partial view that contains the log in controls and leaves the rest of the page undisturbed.

So far what I've done is the following:

I've added a form on the partial view so that it can be posted and substituted the action link with a button

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { ReturnUrl = ViewBag.ReturnUrl }))
{
    @Html.ValidationSummary(true)

    if (Request.IsAuthenticated)
     {
         <p>
             Hello, @Html.ActionLink(User.Identity.Name, "ChangePassword", "Account", routeValues: null, htmlAttributes: new {@class = "username", title = "Change password"})!
             @Html.ActionLink("Log off", "LogOff", "Account")
         </p>
     }
     else
     {
         <ul>
             <li>@Html.LabelFor(m => m.UserName)</li>
             <li>@Html.TextBoxFor(m => m.UserName)</li>
             <li>@Html.LabelFor(m => m.Password)</li>
             <li>@Html.PasswordFor(m => m.Password)</li>
             <li><input class="loginLink loginButton" type="button" value="Log in"/></li>
             <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new {id = "registerLink"})</li>
         </ul>
     }
}

I modified the action like so

[AllowAnonymous]
[HttpPost]
public ActionResult Login(LoginModel model, string returnUrl)
{
    ActionResult result = View("_LoginPartial", model);

    if (ModelState.IsValid)
    {
        if (Membership.ValidateUser(model.UserName, model.Password))
        {
            FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
            if (Url.IsLocalUrl(returnUrl))
            {
                result = Redirect(returnUrl);
            }
            else
            {
                result = View("_LoginPartial", model);
            }
        }
        else
        {
            ModelState.AddModelError("", "The user name or password provided is incorrect.");
        }
    }

    return result;
}

And I created this small Javascript file

var login = {
    callLogin: function () {
        var userName = $("#UserName").val();
        var password = $("#Password").val();

        var data = { UserName: userName, Password: password };
        $("#login").load("/Account/Login", data);
    }
};

$(document).ready(function () {
    $(".loginButton").click(login.callLogin);
});

The log in per se works. The POST action method is being called and the credentials are validated. The problem is that the partial view is not being updated and I have to force a post back by going to another page so that I can see the partial as if the user is logged in.

What would be the missing ingredient to accomplish this?

Thank you.

Josh E · Accepted Answer · 2012-08-17 17:25:52Z

1

Two possible issues/solutions:

There is no element with an ID of login - make sure your form has that id or wrap it in a div.
Pass a selector as part of the url param in your call to .load - $("section").load("/Account/Login #login", data) - ensure that a POST is being made (it should since data is an object)
Inspect the network traffic using Firebug or something similar to verify that a POST is being made, and the partial rendering is getting returned.
Fall back to a more manual approach:
$.ajax("/Account/Login", { data: data, type: 'POST', dataType: 'html' }).done(function(result) { $("#login").empty().append(result); });

EDIT:

I would still like to know why this does not work if I only return the partial view after a successful log in attempt though.

If you carefully examine the HTTP headers being exchanged, you'll notice that the initial call to retrieve that login partial view results in a 200 (OK) along with the login page instead of the expected 401 (unauthorized without the [AllowAnonymous] attrib). Hence, the response HTML is not the partial you expected, but a full html document. Your script doesn't notice that though, and continues normally. To fix that, you'll need to modify how your app responds to unauthenticated requests. There are a number of different things you can do, and fortunately for us all, Phil Haack blogged about them a while back. His post can be found here.

edited Aug 17, 2012 at 17:25

answered Aug 16, 2012 at 21:05

Josh E

7,4522 gold badges34 silver badges45 bronze badges

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

2 Comments

Sergio Romero Over a year ago

Thanks Josh. Unfortunately that didn't work. The partial is wrapped in a <section> element which has the "login" id. Adding the selector on the load method didn't cause anything different to happen.

Sergio Romero Over a year ago

Thanks a lot Josh. The solution that I found works because the "form" selector in the load method IS actually needed, otherwise the full Index view would be rendered in the "section" element. Gave you an up vote for this. Still tried your other suggestions but they don't work.

TigOldBitties · Accepted Answer · 2012-08-17 05:36:49Z

0

The ajax call should be returning the html content which needs to be displayed and the element on which you apply load should be the one that will have it's content replaced by the ajax response.

I guess I missed what load does since I haven't used it that much (in favor of $.post), but still, the action should be returning a View(Model). RedirectToAction does the same thing since it will redirect to an action which will render the view of that action (thus returning the html content) so it will work.

edited Aug 17, 2012 at 5:36

answered Aug 16, 2012 at 21:26

TigOldBitties

1,3359 silver badges15 bronze badges

Comments

Sergio Romero · Accepted Answer · 2012-08-17 14:31:37Z

Found and answer which it is really cool although not ideal.

Turns out that the the controller needs to change a little bit:

[AllowAnonymous]
[HttpPost]
public ActionResult Login(LoginModel model, string returnUrl)
{
    ActionResult result = View("_LoginPartial", model);

    if (ModelState.IsValid)
    {
        if (Membership.ValidateUser(model.UserName, model.Password))
        {
            FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
            if (Url.IsLocalUrl(returnUrl))
            {
                result = Redirect(returnUrl);
            }
            else
            {
                //This is the only difference from the original action
                result = RedirectToAction("Index", "Home");
            }
        }
        else
        {
            ModelState.AddModelError("", "The user name or password provided is incorrect.");
        }
    }

    return result;
}

The only difference is that if the authentication is successful I can do a call to RedirectToAction("index", "Home") and the partial will be updated correctly.

Now this is the cool and not ideal part. The reason why this works is that, even though the RedirectToAction method is returning the full Index view, since the partial I am interested in now has a "form" element and thanks to Josh's suggestion to include a "form" selector in the jQuery load method, of the full Index view, only the _LoginPartial view is loaded in the "login" element.

I think this is not ideal because, a lot of unneeded HTML is being returned and discarded which is quite some overhead. Also, which is not as bad, if the returned "Index" view would happen to have a form of its own elsewhere then the two forms would be loaded in the "login" element which could be easily solved by putting a more specific selector in the load method.

I would still like to know why this does not work if I only return the partial view after a successful log in attempt though.

Collectives™ on Stack Overflow

Use of Ajax to call login functionality in an ASP .Net MVC 4 partial view

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related