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.

Currently I'm using ASP.Net approach to put server controls on a page, then use jqm to enhance those controls to make them looks mobile. I actually do postback to collect form data and process them in code-behind. To avoid a full page refresh, I had to mix them with updatepanel too. Somehow I got them working but deep down I just feel this isn't the right way (or efficient way) of doing it.

There's too much complication of mixing things up to get them right, so I think maybe I should just avoid postback and do everything-else in pure AJAX requests?

$.ajax({
 type: 'POST',
  url: "/GetName",
  data: "{}",
  contentType: "application/json; charset=utf-8"

})
.success(function (response) {
  alert(response);
});

Code-behind:

[WebMethod ()] 
public String GetName()
{ return "Jack"; }

Questions:

• This works, but is this the better way to go with jQuery-Mobile websites, or this is just another bad example?

• Is UpdatePanel and postback a bad idea for this scenario? (I know they work)

• If AJAX is preferred, how do I go about populating a dropdownlist on pageload (Not server control)? Sending an AJAX request to populate dropdownlist on $(document).ready() seems stupid to me

What I'm looking for is rules of thumb of developing a mobile site, I don't want to steer too far away from what should be doing right. Your inputs are very much appreciated. Thanks.

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.