Redirect after POST doesn't change URL

Question

I'm using the "Redirect After Post" (http://en.wikipedia.org/wiki/Post/Redirect/Get) pattern to solve the problems with refreshing that it solves, but I'm not seeing the URL change after the POST and subsequent GET.

Here is my setup:

I have a form with some pretty extensive client-side validation, then submit.

@using (Html.BeginForm("AddItem", "Order", FormMethod.Post, new { Id = "addItemForm" })) 
{
    // form stuff
}

Client-side validation:

$('#addToOrder').click(function () {
    // do a bunch of validation stuff.
}

if (criteriaMet) {
    $('#addItemForm').submit();
}

"AddItem" controller:

public class OrderController {

[HttpPost]
public ActionResult AddItem(long? orderId, long menuItemId) 
{
    if (oneConditionIsTrue)
    {
        return RedirectToRoute("NamedRoute1", new { RouteValueDictionary values });
    }
    else
    { 
        return RedirectToRoute("NamedRoute2", new { RouteValueDictionary values });
    }
}

public class NamedRouteController
{
    public ActionResult NamedRouteAction
    {
        // do some stuff
        if (mobile)
        {
            return View("MobileView", model);
        }
        else
        {
            return View("RegularView", model);
        }
}

After redirecting from the POST action (AddItem), I can step things through the GET action to the return (either one). I would expect the URL in the browser after all of this to be http://mydomain.com/NamedRoute/NamedRouteAction but it's http://mydomain.com/Order/AddItem. Why is this? Shouldn't the RedirectToRoute change the URL?

What am I missing?

Answer 1

I suspect that the controller action is somehow invoked with an AJAX request. For example this could happen if you are using jQuery Mobile or something. Or maybe there's some other script that you have written doing this - it hijacks the form submission and sends an AJAX request instead. And since it is an AJAX request, you cannot possibly expect that the url in the client browser would ever change - that's the whole point of AJAX - stay on the same page.

This could be very easily verified by using a javascript debugging tool such as FireBug. Simply look at the Network tab and see if the POST request was an AJAX request. In the Net tab find the request and see if there's the following request header:

X-Requested-With: XMLHttpRequest

jQuery appends this HTTP header to all AJAX requests it sends.

So basically if you expect a redirect to happen after a POST request you shouldn't use AJAX to submit your form. Or to be more precise: the redirect happens on the server side (once again you will be able to see it in FireBug - the 302 status code) and then the XMLHttpRequest simply follows this redirect but the client browser will not change its current location.