updating portion of asp.net MVc 4 view with partial view

Question

I am working on asp.net MVC 4 application. I have an action link on my main view like this:

  @Ajax.ActionLink("Get LinkedIn Profile","LinkedIn", new AjaxOptions
                 {
                     UpdateTargetId="partialDiv", // <-- DOM element ID to update
                     InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element
                     HttpMethod = "GET" // <-- HTTP method
                 })
            <div id="partialDiv"></div>

and in controller, I have action result which performs redirection to linkedIn and returns to another action result.

  public ActionResult LinkedIn()
        {
            return Redirect("https://www.linkedin.com/uas/oauth2/authorization?response_type=code&redirect_uri=" + HttpUtility.HtmlEncode("http://127.0.0.1:81/Account/LinkedInAuthorized"));
}

now from LinkedInAuthorized I want to return a partialview or some contents which should be inserted in partialDiv, So I am doing like this:

 public ActionResult LinkedInAuthorized(string code, string state)
        {
         // some code here
        return PartialView("LinkedInProfileInfo", returnVal);
        }

But it replaces whole view instead of inserting partial view in that div.

Please suggest me solution to this.

Answer 1

You need to step back and re-evaluate what it is you're trying to do. It wouldn't hurt to do a little more research into AJAX and OAuth too, because you're obviously not too familiar with those concepts.

First, let's start with the OAuth process. First, you need to direct the user to a page on the provider, in this case, LinkedIn. There, the user will authorize with the provider, who will then post back to a designated page on your site with a payload. Your application deciphers that payload, storing any relevant details, such as an auth token to use in later requests, and then the process is complete. That can't be done over AJAX. Once you have the auth token you can do whatever you want with AJAX, but the initial authorization is synchronous.

Now, your AJAX. AJAX can be thought of as a simple HTTP client. Your browser is also an HTTP client, but much more sophisticated. Part of that sophistication is in providing a seemless user experience, regardless of how many requests are involved behind the scenes. AJAX, however, deals in a simple request-response cycle. Now, let's see why this is an important difference.

A browser requesting your LinkedIn action

GET /url/to/linkedin/action
> HTTP/1.1 302
> Location: https://www.linkedin.com/uas/oauth2/authorization...

GET https://www.linkedin.com/uas/oauth2/authorization...
> HTTP/1.1 200
> (crap ton of HTML)

AJAX requesting your LinkedIn action:

GET /url/to/linkedin/action
> HTTP/1.1 302
> Location: https://www.linkedin.com/uas/oauth2/authorization...

See, the browser knows that since your original URL was redirected, you probably want to actually go there, so it issues another request for the redirected URL. AJAX makes no such assumptions. It sent the request and got a response, so it's done. It's up to you to issue another AJAX request to proceed. So, even if you could use AJAX for OAuth authorization, you couldn't do it like this.

Answer 2

Try using Html.RenderPartial inside partialDiv. Like this:

<div id="partialDiv">
  @{ Html.RenderPartial("LinkedInProfileInfo", returnVal); }
</div>

returnVal might not be the correct value to there. It could also be Model (sorry I'm new to MVC).