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.