Question

I am using ajax for posting 2 values to my controller, the controller got the values but wouldn’t display the view. Please assist what I am doing wrong here. Thanks.

Javascript:

function grantPermission() {
        window.FB.login(function (response) {
            if (response.authResponse) {
                uid = response.authResponse.userID;
                accesstoken = response.authResponse.accessToken;
                var postData = { facebookUID: uid, facebookAccessTok: accesstoken };
                $.ajax({
                    url: '@Url.Action("SavePhoto")',
                    data: postData,
                    dataType: 'json',
                    success: function (response) {
                        // process the results from the controller action
                        //  window.location.href = response.Url;
                    }
                });
            } else {
                console.log('User cancelled login or did not fully authorize.');
                alert('User cancelled login');
            }
        }, { scope: 'publish_stream' });
    };

Button:

   <input type="button" id="auth-loginlink" value="Proceed" onclick="grantPermission();"/>

Controller:

public PartialViewResult SavePhoto(string facebookUID, string facebookAccessTok)
        {
            return PartialView("BlurredPhoto");
        }

Answer 1

You need to embed the returned HTML back into your document somewhere. e.g. If you add a

<div id='MyDiv'>

then change your ajax call to

            success: function (responseText, textStatus, XMLHttpRequest) {
                $("#MyDiv").html(responseText);
            }

As Slaks has mentioned, you also need to change your return datatype accepts to ‘html’.