Managing jQuery Mobile and ASP.NET MVC Compatibility Issues

jQuery Mobile is a great technology for producing mobile-friendly applications that work on multiple devices.

ASP.NET MVC is a great technology for creating elegant, scalable Web applications.

The two were made for each other: so much so that the Visual Studio 11 beta includes jQuery Mobile along with ASP.NET MVC and even provides a specific mobile template.

Sadly, however, jQuery Mobile and ASP.NET MVC don’t always play nicely together.

I was reminded of this forcefully last night when I uploaded the latest version of my personal website, Cocktails-R-Us (which I’ve now upgraded to ASP.NET MVC 4). The problems tend come down to two things: IDs and AJAX–and sometimes both together.

One issue that bit me this time around was an incompatibility between jQuery Mobile and the ASP.NET authentication framework. I tested the new version locally and everything worked. Everything seemed fine on the live server as well, until I tried to log in using a mobile browser and this happened:

screen grab of error

The problem was a simple one. JQuery Mobile uses AJAX navigation unless you tell it otherwise. The ASP.NET authentication system issues 302 redirects which are no problem to normal requests, but cause issues with AJAX. So the answer is to turn off AJAX. For that, all you have to do is add the attribute data-ajax=”false” to the <a> tag – which means doing the following in ASP.NET MVC:

code sample

A related problem with mixing jQuery Mobile and ASP.NET MVC is the very different assumptions each makes about how you will use the ID attribute.

One of the best things about jQuery Mobile is the elegant, animated page transitions. And one of the worst things about jQuery Mobile is the price you have to pay for them. The animated page transitions work by adding the new page into the existing DOM. That means that while only one page is visible at a time, the content of multiple pages is in the DOM simultaneously.

Now, it’s not as bad as it sounds. JQuery Mobile is not putting the entire page into the DOM – just the part you’ve identified as the content of the page. But it still leads to problems with IDs.

Let’s imagine that a user is going through a sequence of HTML forms that map to ASP.NET MVC controller methods. In those methods, the HTML form is automatically translated into an Entity. And let us assume that each of these entities has a Name property (in my case, for example, Cocktails, Beverages and Ingredients might have the Names ‘Old Cuban‘, ‘Rum’, ‘Mint’). The HTML forms would contain id=”Name” for each of these textboxes. Those IDs would work with validation (as we don’t have repeating forms on the same page) and everything would be fine. Except that with jQuery Mobile’s default behavior, the forms would all exist inside the current DOM, and we would end up with multiple repeating IDs and badly formed HTML.

A jQuery Mobile purist would no doubt say – well, just don’t use the IDs: you could manage without them on the client. Well, yes you could – but that would involve doing a lot of work on the server to reproduce behaviors that are given to you ‘out of the box’ with the MVC framework. The alternative is to turn off the nice AJAX transitions for pages with HTML forms. Unless, of course, you prefer to write your own Model Binder and/or View Engine for ASP.NET MVC to get around the problem.

Personally, I think I’ll just turn off the AJAX.

Kevin Rattan

For related information, check out these courses from Learning Tree:

jQuery: A Comprehensive Hands-On Introduction

Building Web Applications with ASP.NET MVC

5 Responses to “Managing jQuery Mobile and ASP.NET MVC Compatibility Issues”


  1. 1 Daniel June 14, 2012 at 9:35 am

    I’ve also had severe problems coping with the combination MVC and jQuery mobile.

    My urls was corrupted (even though the redirecting was correct). Typically this would happen: localhost/site/controller/action#/controller/action

    I had to turn of ajax by doing one of these:
    $(document).bind(“mobileinit”, function () { $.mobile.ajaxEnabled = false; });
    or this:
    added rel = “external” on actionlinks (which I guess does the same trick as
    data_ajax =”false” as you mentioned)

    If the url’s is not correct, the validation does not work on forms! This took forever to find out.

    Another thing: I could not understand why Html.BeginForm and Ajax.BeginForm both produced ajax posts, but I suppose this is done by the jQuery mobile javascript(?)

    As a beginner in MVC and Jquery this turned out to be the biggest obstacle in my project. In addition,the lack of knowlegde of how to set up the right routing also complicates things.

    For all of you who are in the same situation, I would look at these articles for methods to cope with these problems regarding url problems:
    http://stackoverflow.com/questions/10265026/asp-mvc3-problems-with-url-after-adding-jquerymobile

    JQuery mobile navigation model:
    http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html

    A different approach for solving url “corruption” (it works but:
    http://stackoverflow.com/questions/7824243/jquery-mobile-mvc-getting-the-browser-url-to-change-with-redirecttoaction

    I think the MVC, razor, jquery mobile is a very good combination on paper, but to get it working correctly required some time (on google) and some magic tricks. Maybe there is just too many combinations of technology rattled together in some sort of unholy trinity.

    • 2 Kevin Rattan, Learning Tree June 18, 2012 at 1:23 pm

      Hi Daniel,

      Yes – jQuery mobile is automatically ajax-ifying your calls, so a normal form becomes an Ajax form unless you tell it not to do so. And both rel=”external” and data-ajax=”false” do the same thing, but semantically you’re supposed to use data-ajax for local sites and external for external sites (though, since jQuery always opens those without Ajax, it does seem a little redundant).

      MVC and jQuery are great together… but you’re right about the need for some magic tricks. I’ve blogged about some of the issues before, and no doubt will do so again.

      Cheers,

      Kevin

  2. 3 Mustakim Ali October 16, 2012 at 3:15 pm

    Easy solution could be (as changing each Html.ActionLink is time consuming)
    adding this at the end of the _Layout.cshtml (just before closing of the ‘body’ tag)

    $(document).ready(function() {
    $(‘a’).each(function() {
    $(this).attr(“data-ajax”, “false”);
    });
    });

    • 4 Kevin Rattan, Learning Tree October 17, 2012 at 11:36 am

      Hi Mustakim,

      That would be fine assuming you don’t want jQuery mobile to use any Ajax with links. I am happy to let it go ahead and use Ajax in most circumstances, so I only turn it off selectively where it can cause a problem, as in potential 302 redirects.

      Cheers,

      Kevin


  1. 1 Tech Info - backbone.js – jquery mobile require.js and backbone – Stack Overflow Trackback on June 9, 2012 at 7:31 am
Comments are currently closed.



Learning Tree International

.NET & Visual Studio Courses

Learning Tree offers over 210 IT training and Management courses, including a full curriculum of .NET training courses.

Free White Papers

Questions on current IT or Management topics? Access our Complete Online Resource Library of over 65 White Papers, Articles and Podcasts

Enter your email address to subscribe to this blog and receive notifications of new posts by e-mail.

Join 29 other followers

Follow Learning Tree on Twitter

Archives

Do you need a customized .NET training solution delivered at your facility?

Last year Learning Tree held nearly 2,500 on-site training events worldwide. To find out more about hosting one at your location, click here for a free consultation.
Live, online training

%d bloggers like this: