jQueryMobile in ASP.NET WebForm

Question

Is using jQueryMobile in ASP.Net Web Form application a right approach?
What are pros and cons of using jQueryMobile or other Mobile JS library in ASP.NET web Form?

Answer 1

ASP.NET Web Forms is a fine framework, but you don't need most of it for mobile development with JavaScript UI frameworks. I'll list the cons first, followed by an alternative and finally give some tips when you must use Web Forms despite the cons.

---

The problem with ASP.NET Web Forms is that you don't always have full control over the HTML. This can be mitigated by using control adapters, by avoiding the use of certain controls, and by using the EnableViewState properties on controls and pages. ASP.NET Web Forms 4.0 also mitigates some of the issues like unpredictable client IDs. But all of that does add up to extra work just to work around the nature of ASP.NET Web Forms.

Also, most web controls will emit JavaScript into the page for the ASP.NET Web Forms post back model to work. For example with <asp:DropDown AutoPostBack="true">, <asp:TextBox OnTextChanged="..." > or <asp:Panel DefaultButton="...">. This is really nice if your development style is mostly server-side and you are happy not to have to bother with the details of making it all work client-side.

The <asp:UpdatePanel> is another fine example: you add it to the page and you have magically AJAX-enabled the page. But it renders quite a lot of JavaScript, all your view state is still sent back and forth between client and server, and even for a tiny update the complete page is processed server-side.

But for mobile development you want to optimize your pages for smaller screens and fast load times. Generally the mobile JavaScript frameworks take care of maintaining state on the client-side, sending and receiving messages asynchronously and updating the view through JavaScript. That means all that infrastructure in ASP.NET Web Forms for maintaining state across post backs (view state, page life cycle) is often quite useless and sometimes even counter-productive.

---

I think overall ASP.NET MVC is a better fit for mobile development in general, and for jQuery Mobile as well.

---

If you must use ASP.NET Web Forms, then use controls like the <asp:ListView> for rendering HTML that you are going to use for jQuery Mobile UI list elements. This control gives you quite good control over the HTML.

Try not to use the <asp:UpdatePanel> control, because then you are definitely mixing metaphors. In general, don't rely on post backs too much.

Instead, you can use web methods on your page that you can call directly from JavaScript. Static page methods with the [WebMethod] attribute will return JSON formatted data, which is a nice fit for most JavaScript frameworks today. The fact that these methods must be declared as static means they do not participate in the page's life cycle. That also means they have better performance characteristics.

Finally, even when you are using Web Forms, you can always use .ashx files (basic IHttpHandler and it's asynchronous cousin, IHttpAsyncHandler) or web services with the ScriptService attribute. These options will also migrate fine should you decide to use ASP.NET MVC in the future.

Answer 2

I am hoping this does not turn into an ASP.NET WebForms bashing party.

The answer is both ASP.NET WebForms is good, and so is ASP.NET MVC. What are you using today? What are you most comfortable with? How much time do you have? What's the project deadline?

Yes, the WebForm generated control ids are little annoying but there are work arounds. Yes, try to stay away from the UpdatePanel, but there is nothing stopping you from using jQuery at the same time. The UpdatePanel has historically been abused. Period. Its a ViewState hogger which is not ideal for mobile applications.

At the end of the day, WebForms will work just fine, have the page lifecycle, and can perform some solid server side logic. In a mobile environment I tend to stay away from any runat=server control since I want to mostly make my own Html and avoid ViewState. In addition, static [WebMethod, ScriptMethod] at the page level help to organize your code.