Using jQuery Mobile with ASP.NET MVC

Pete Mourfield

2.00/5 (2 votes)

3 Mar 2011CPOL3 min read

50.9K

Using jQuery Mobile with ASP.NET MVC

Background

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 http://jquerymobile.com/download/ 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:

HTML

<html>
    <head>
        <link rel="stylesheet" 
	href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
        <script type="text/javascript" 
	src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" 
	src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header"><h1>Page Title</h1></div>
            <div data-role="content"><p>Page content goes here.</p></div>
           <div data-role="footer"><h4>Page Footer</h4></div>
        </div>
    </body>
</html>

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 takes 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.Clear();
    ViewEngines.Engines.AddGenericMobile<RazorViewEngine>();
    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:

HTML

<html>
<head>
    <link rel="stylesheet" 
	href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" 
	src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" 
	src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>My MVC Application</h1>
        </div>
        <div data-role="content">@RenderBody()</div>
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>
</body>
</html>

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:

HTML

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
<ul data-role="listview">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href=http://asp.net/mvc 
	title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

and my About view page looks like:

HTML

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

<h2>About</h2>
<p>
     Put content here.
</p>

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

Finally

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 http://jquerymobile.com/. This will help you get a better feel for how to accomplish your specific mobile UI tasks.

CodeProject