Load MVC PartialView via Ajax

In my View I have:

$.ajax({
    url: '/Profile/TryToGetPersonalInfo',
    type: 'post',
    success: function (outData) {
        if (outData.loggedIn == true) {
            $('#PersonalInfoData').load(outData.data);
        }
    }
});

And in my Controller I have:

[HttpGet]
private ActionResult PersonalInfo()
{
    return PartialView();
}

[HttpPost]
public JsonResult TryToGetPersonalInfo()
{
    // loggedIn is temporary
    return Json( new { loggedIn = true, data = this.PersonalInfo() } );
}

How come .load() doesn't do the job? I have also tried .html(), b开发者_JS百科ut still, no luck.

Please note that I really want to keep this form (having ProfileInfo() as private), and TryToGetProfileInfo() as post, cause I'm using validation tokens.

You are returning a Json object. You need to return html. In similar cases, I declare the action return type as an ActionResult and return a partial view.