Ajax post can't find action controller

Question

I'm writing a simple web app that allows users to login via facebook. When using the javascript sdk, I'm able to retrieve the proper credentials, but my ajax post is unable to find the mvc action to process the information.

Here's the js code:

        FB.getLoginStatus(function (response) {
            if (response.status === 'connected') {
                var credentials = { uid: response.authResponse.userID, accessToken: response.authResponse.accessToken };
                SubmitLogin(credentials);
            }
        });

        function SubmitLogin(credentials) {
            alert("Creds: " + credentials.uid + ":::" + credentials.accessToken);
            $.ajax({
                type: "POST",
                ContentType: 'application/json',
                url: '@Url.Action("FacebookLogin","Home")',
                data:JSON.stringify(credentials), 
                success: function () {
                    window.location("~/Views/Account/Home.cshtml");
                },
                 error: function (XMLHttpRequest, textStatus, errorThrown) {
                     alert(XMLHttpRequest.responseText);
                 }
           });
        }

and the corresponding controller:

    [HttpPost]
    public JsonResult FacebookLogin(string uid, string accessToken)
    {
        Session["uid"] = uid;
        Session["accessToken"] = accessToken;

        return null;
    }

The model used in the controller:

public class FBLoginModel
{
    public string uid { get; set; }
    public string accessToken { get; set; }
}

The alert in the js function shows the correct token, but my ajax post is unable to the action. When I remove the "[HttpPost]" above the controller, I can access the action, but all data I attempt to pass is null.

Any help would be greatly appreciated. Thanks.

Answer 1

I somehow devised a solution... By writing out the url and adding a forward slash to my ajax call, somehow my ajax call can find my action.

$.ajax({
     type: 'POST',
     url: 'Home/FacebookLogin/',
     data: {
         'uid': response.authResponse.userID,
         'accessToken': response.authResponse.accessToken
     },
     cache: false,
     success: function (result) { },
     error: function (XMLHttpRequest, textStatus, errorThrown) {
         alert(XMLHttpRequest.responseText);
     }
});

Answer 2

use

   $.ajax({
         type: "POST",
         ContentType: 'application/json',
         url: '@Url.Action("FacebookLogin","Home")',
         data:JSON.stringify(credentials),
         success: function () {
              window.location("~/Views/Account/Home.cshtml");
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
               alert(XMLHttpRequest.responseText);
         }
     });

Ther should be single quote in 'Url.Action()'

Yout Controller action should be like below.Because you are not passing model items

 public JsonResult FacebookLogin(long uid,string accessToken)
    {
    Session["uid"] = uid;
    Session["accessToken"] = accessToken;
    return null; //Because you are not posting anything back
    }