How to set the ASP.NET Form Action with jQuery Mobile AJAX requests that redirect

A major problem I have had with using ASP.NET and jQuery Mobile is that jQuery Mobile turns most requests into an AJAX call. It’s very cool, and it is the crux of the framework, also is what makes it feel like a native app instead of a web page. If you are familiar with ASP.NET and it’s single form tag, you know it’s wants to control everything including the “action” of the form.

I know I know ASP.NET MVC…etc is better for jQuery Mobile, but in this specific case, I am tied to a big giant ASP.NET custom CMS engine.

So, what’s happens when we take ASP.NET out of the loop(ajax request/hijacks)? It’s not pretty and you will get all kinds of Event/ViewState errors, postbacks to the root, no events firing…etc. I played with lots of solutions and this is the one that works for me:

1. Disable ViewState and Event Validation

protected override void OnInit(EventArgs e)
{       
    Page.EnableEventValidation = false;
    Page.EnableViewState = false;
    base.OnInit(e);
}

2. Always set the data-url of the jQuery Mobile page being viewed(this updates the browser url during a redirect)

<div id="Home" data-role="page" data-url="<%= Request.RawUrl %>">
......
</div>

3. When the page inits set the form action with a little jQuery

$(document).bind('pageinit', function (event) {
    var activePage = $(event.target); //<---needed because $mobile.activePage isn't available yet
    $('form').attr("action", activePage.attr("data-url"));
});