JQuery-Mobile and ASP.Net - AJAX or Postback?

Question

I\'ve been developing ASP.Net for the past and until recently come across a mobile project. Jquery-Mobile seems perfect as a framework for this, so I just dived into it.

Answer 1

asp.net Web Forms and jQuery Mobile really don't work together. The postback model breaks the way that jQuery Mobile ajax works and it will fall appart when you have more than a single page or form. Specifically Web Forms requires a single <form> tag that wraps all server side controls and you cannot introduce additional "internal" forms. jQuery Mobile really works best with the ajax model and one or more "pages" (<div data-role="page">) and forms that are contained within the DOM. Update panels will ultimately cause chaos.

One approach is to simply turn off jQuery Mobile ajax loading. You can do that with this:

//note that the order of script loading here is critical.
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
    $(document).bind(“mobileinit”, function() {
        $.mobile.ajaxEnabled = false;
    });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>   

but in the end, you won't have a highly efficient web site. If you site is running over a local wireless network, it may be good enough.

I work in a mostly Web Forms environment and had a need for a Web Forms based jQuery Mobile app and coded 5 or so "pages" as a single static html file. I then relied on JavaScript and jQuery ajax loading to ASMX web service end points. I also made extensive use of KnockoutJS but I certainly could have relied solely of JavaScript and jQuery ajax to pull data (and in my case, the app was of a reporting nature with no data updating.) If you are saving data, you can use the same technique.

An even better approach is to go with asp.net MVC which eliminates the forced postback model and allows fine grained control over where your <form> tags are placed.

I am working on a larger mobile site and using MVC for the back end and taking full advantage of Razor views but in the end, I am relying on client side ajax calls for all data and KnockoutJS for almost all dynamic markup. In the end, my client side app isn't all that different between Web Forms and MVC. MVC based controllers are easier to work with for ajax end points and the solution is cleaner.

In general, I would lump both solutions into the "single page application" aka SPA approach. There are other approaches that might work with Web Forms but in my limited exploration, this was the best option.