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

Question

I am developing ASP.Net for the past, and until recently I came across a mobile project. JQuery-Mobile seems ideal as the basis for this, so I just immersed myself in it.

I am currently using the ASP.Net approach to install server controls on a page, and then using jqm to enhance these controls so that they look mobile. I'm really doing a postback to collect form data and process it in code. To avoid refreshing the full page, I also had to mix them with the refresh panel. Somehow I made them work, but deep down I just feel that this is the wrong way (or effective way) to do it.

There are too many difficulties in mixing things up to fix them correctly, so I think maybe I should just avoid postback and do the rest in pure AJAX requests?

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

Code for:

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

Questions:

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

• Is UpdatePanel and returns the wrong idea for this scenario? (I know that they work)

• If AJAX is preferred, how can I populate a dropdown on pageload (Not server control)? Sending an AJAX request to populate the dropdown with $ (document) .ready () seems silly to me

What I'm looking for is the rules of thumb for developing a mobile site, I don’t want too far from what needs to be done correctly. Your contributions are greatly appreciated. Thanks.

Answer 1

asp.net Web Forms and jQuery Mobile really don't work together. The postback model breaks the way jQuery Mobile ajax works and it will crash when you have more than one page or form. In particular, Web Forms requires a single <form> tag that wraps all the server-side controls, and you cannot enter additional “internal” forms. jQuery Mobile really works best with the ajax model and one or more "pages" ( <div data-role="page"> ) and the forms that are contained in the DOM. Update panels end up causing chaos.

One approach is to simply disable jQuery Mobile ajax downloads. You can do this 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 will not have a high-performance website. If the site works through a local wireless network, it can be quite good.

I mainly work in a Web Forms environment and need a jQuery mobile form application for web forms and encoded 5 or so “pages” as one static html file. Then I relied on downloading JavaScript and jQuery ajax to the endpoints of the ASMX web service. I also used KnockoutJS extensively, but of course I could only use JavaScript and jQuery ajax to output the data (and in my case the application was reporting like without updating the data.) If you save the data, you can use the same method.

Better yet, go with asp.net MVC, which eliminates the forced postback model and allows fine-grained control over <form> tags.

I work on a large mobile site and use MVC for the back end and make full use of Razor views, but in the end, I rely on client-side ajax requests for all data and KnockoutJS for almost all dynamic markup. In the end, my client application is different from Web Forms and MVC. MVC-based controllers are easier to work with ajax endpoints and the solution is cleaner.

In general, I would like to combine both solutions into a "one-page application" as well as a SPA approach. There are other approaches that might work with Web Forms, but in my limited research this was the best option.