jQuery Mobile/MVC: Getting the browser URL to change with RedirectToAction

I think I’ve found an answer. Buried deep in the jQuery Mobile documentation, there is information about setting the data-url on the div with data-role="page". When I do this, I get the nice jQuery Mobile AJAX stuff (page loading message, page transitions) AND I get the url in the browser updated correctly.

Essentially, this is how I’m doing it…

[HttpPost]
public ActionResult Products(...)
{
    // ... add products to cart
    TempData["DataUrl"] = "data-url=\"/Cart\"";
    return RedirectToAction("Index", "Cart");
}

Then on my layout page I have this….

<div data-role="page" data-theme="c" @TempData["DataUrl"]>

On my HttpPost actions I now set the TempData["DataUrl"] so for those pages it gets set and is populated on the layout page. “Get” actions don’t set the TempData[“DataUrl”] so it doesn’t get populated on the layout page in those situtations.

The only thing that doesn’t quite work with this, is when you right-click… view source… in the browser, the html isn’t always for the page you are on, which isn’t unusual for AJAX.

Leave a Comment