Using jQuery Mobile with ASP.NET MVC


jQuery Mobile is a web UI framework from the same guys over at the jQuery Project. jQuery Mobile is built on top of the jQuery Core and jQuery UI projects with the intent of bringing a consistent UI framework to mobile platforms.

To get started using the jQuery Mobile framework you can either download the .js and .css files from or you can use the cdn-hosted versions as well.

The structure of a page that uses jQuery Mobile is pretty straightforward. First the page must start with an HTML5 ‘doctype’. Also, in the ‘head’, references to jQuery, jQuery Mobile and the mobile theme CSS are all required.

Next, the mobile page is defined inside the ‘body’ tag. Each ‘page’ is defined within a ‘div’ element with the data-role=”page” attribute. Inside the ‘page’ element, there are a set of child ‘divs’ with data-roles of “header”, “content”, and “footer”. Note, these are optional, but are typically used to provide a consistent look-and-feel. A very simple jQuery Mobile page would look like this:



Page Title


Page content goes here.


Page Footer


Incorporating with ASP.NET MVC

I like the idea of incorporating jQuery Mobile as an alternate mobile view in ASP.NET MVC because it allows us to use the same controllers and models as we would with our regular or desktop views while giving us the flexibility of delivering content that is mobile friendly.

To incorporate jQuery Mobile templates into an ASP.NET MVC site I like the approach that Scott Hanselman take with ‘A Better ASP.NET MVC Mobile Device Capabilities ViewEngine‘. Basically what Scott is doing is building a custom view engine for ASP.NET MVC that redirects the view to some relative route based on if the incoming request is coming from a mobile browser (or not).

So, to putting the whole thing together goes something like this: I’m starting with a new ASP.NET MVC 3 Project, but you should be able to follow these steps to start using jQuery Mobile in your existing ASP.NET MVC applications as well. The first step is to include the custom view engine and mobile helpers from Scott Hanselman’s article. I just created two new classes in a Helpers folder in my project. Looks like this:


Next, again from Scott’s article, you’ll need to ‘plug-in’ the CustomMobileViewEngine into MVC. To do this I added this code to my Application_Start().


protected void Application_Start()
    ViewEngines.Engines.Add(new RazorViewEngine());

The next step is to add either a mobile MasterPage or Layout page, depending on which view engine you’re using. In my case, I’m using the Razor view engine in ASP.NET MVC 3, but the basic techniques are the same with the WebForms view engine as well. To do this right-click on the Views\Shared directory in your project and select ‘Add->New Item’. Select the appropriate template type for your projects view engine; A View Master Page for ASPX or a Layout Page for Razor. And name the page appropriately. I’m calling mine ‘_LayoutMobile.cshtml’. My jQuery Mobile ready layout page looks like this:



My MVC Application





Page Footer



When it’s all said and done, my project’s view directory structure looks like this:

To create the Views for the Home controller I right-clicked on the Views\Home directory and added a new folder named ‘Mobile’. Next, I right-clicked on the newly created Mobile folder and selected ‘Add->View’. In the Add View dialog, I filled out the View name and made sure to select the appropriate layout or master page for the mobile templates that I created earlier.


The code for my Index view page looks like


    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
    • @Html.ActionLink(“Home”, “Index”, “Home”)


  • @Html.ActionLink(“About”, “About”, “Home”)





To learn more about ASP.NET MVC visit

and my About view page looks like


    ViewBag.Title = "About";
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";


Put content here.

Here’s what the views look like rendered on a mobile device:



Now what I’ve presented here is a very basic example, but hopefully, you can see the power of using a technique like this one to share the controllers and models, but change out the views based on the type of browser that is making the request.

I’d encourage you to head over and check out the documentation and demos for jQuery Mobile at This will help you get a better feel for how to accomplish your specific mobile UI tasks.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s