Redirecting to another item in an AJAX request

Question

I am using Sitecore 8.2 with MVC.

I am trying to perform a page redirect, but my code isn't working.

I'm calling an MVC controller action method from JavaScript using a jQuery AJAX call.

The method is hit and the related items are also present in the content tree. But nothing happens. The current page remains and no redirection occurs. Also, there are no errors or messages in the browser console.

Controller method:

public ActionResult RedirectPage(string currentItemGuid)
{
  Item pageItem = Sitecore.Context.Database.GetItem(currentItemGuid);

  if (pageItem != null)
  {
    string pageURL = Sitecore.Links.LinkManager.GetItemUrl(pageItem);
    //pageURL = /products/radio
    string newURL = pageURL + "-type";
    //newURL = /products/radio-type. This item is present in the content tree in the same folder structure.
    return Redirect("~" + newURL);
  }
  else
  {
    return new EmptyResult();
  }
}

JavaScript:

$(function () {        
  $(".ddlProducts").change(function () {            
    $.ajax({
      url: "api/sitecore/Products/RedirectPage",
      type: "POST",
      data: { currentItemGuid: '{100-100-100}'},
      context: this,
      success: function (data) {                
          console.log("success", data);
      },
      error: function (data) {
          console.log("error", data);
      }
    });
  });
});

Answer 1

The problem here is that 301/302 redirects are handled by the browser (or more specifically, by the XMLHttpRequest object) transparently. This means that your success handler will be called only when the browser issues a second request and loads the page it was redirected to.

So you should not attempt to use redirect response codes in AJAX calls. Instead, I suggest that you return a custom object containing the redirect URL:

return Json(new { redirectUrl = someUrl });

And then manually redirect using JavaScript:

$.ajax({
    url: "/api/sitecore/Products/RedirectPage",
    type: "POST",
    data: { currentItemGuid: '{100-100-100}'},
    context: this,
    dataType: "json", // this is important
    success: function (data) {                
        if(data.redirectUrl) {
            window.location.href = data.redirectUrl;
        }
    },
    ...
});