Click here to Skip to main content
15,867,750 members
Articles / Web Development / HTML

Using jQuery Mobile with ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
2.00/5 (2 votes)
3 Mar 2011CPOL3 min read 50.1K   11   2
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:

Step1

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().

C#
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.

Step2

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.


Filed under: ASP.NET, CodeProject
Tagged: asp.net, jquery, mobile, mvc

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
Software Developer

Comments and Discussions

 
GeneralMy vote of 2 Pin
Albert van Peppen20-Mar-13 5:44
professionalAlbert van Peppen20-Mar-13 5:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.