In my previous blog posts, I have demonstrated a simple web app using ASP.NET MVC 3 and EF Code First. In this post, I will be focus on making this application for mobile devices. A single web site will be used for both mobile browsers and desktop browsers. If users are accessing the web app from mobile browsers, users will be redirect to mobile specific pages and will get normal pages if users are accessing from desktop browsers. In this demo app, the mobile specific pages are maintained in an ASP.NET MVC Area named Mobile and mobile users will be redirect to MVC Area Mobile.
Let’s add a new area named Mobile to the ASP.NET MVC app. For adding Area, right click the ASP.NET MVC project and select Area from Add option. Our mobile specific pages using jQuery Mobile will be maintained in the Mobile Area.
ASP.NET MVC Global filter for redirecting mobile visitors to Mobile area
Let’s add an ASP.NET MVC Global filter for redirecting mobile visitors to Mobile area. The below Global filter is taken from the sample app http://aspnetmobilesamples.codeplex.com/ created by the ASP.NET team. The below filer will redirect the Mobile visitors to an ASP.NET MVC Area Mobile.
Let’s add the global filer RedirectMobileDevicesToMobileAreaAttribute to the global filter collection in the Application_Start() of Global.asax.cs file
Now your mobile visitors will be redirect to the Mobile area. But the browser detection logic in the RedirectMobileDevicesToMobileAreaAttribute filter will not be working in some modern browsers and some conditions. But the good news is that ASP.NET’s browser detection feature is extensible and will be greatly working with the open source framework 51Degrees.mobi. 51Degrees.mobi is a Browser Capabilities Provider that will be working with ASP.NET’s Request.Browser and will provide more accurate and detailed information. For more details visit the documentation page at http://51degrees.codeplex.com/documentation.
Let’s add a reference to 51Degrees.mobi library using NuGet
We can easily add the 51Degrees.mobi from NuGet and this will update the web.config for necessary configuartions.
We need to include the following files to use jQuery Mobile.
- The jQuery Mobile CSS file (jquery.mobile-1.0a3.min.css)
- The jQuery library (jquery-1.5.min.js)
- The jQuery Mobile library (jquery.mobile-1.0a3.min.js)
Let’s add the required jQuery files directly from jQuery CDN . You can download the files and host them on your own server.
jQuery Mobile page structure
The basic jQuery Mobile page structure is given below
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a1.min.css" />
<p>Page content goes here.</p>
The jQuery Mobile pages are identified with an element with the data-role="page" attribute inside the <body> tag.
Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are div element with data-roles of "header", "content", and "footer".
The div data-role="content" holds the main content of the HTML page and will be used for making user interaction elements. The div data-role="header" is header part of the page and div data-role="footer" is the footer part of the page.
Creating Mobile specific pages in the Mobile Area
Let’s create Layout page for our Mobile area
Let’s add an Index view page
In the Index page, we have used data-role “listview” for showing our content as List View
Let’s create a data entry screen
In jQuery Mobile, the form elements should be placed inside the data-role="fieldcontain"
The below screen shots show the pages rendered in mobile browser
You can download the source code from http://efmvc.codeplex.com
We have created a single web app for desktop browsers and mobile browsers. If a user access the site from desktop browsers, users will get normal web pages and get mobile specific pages if users access from mobile browsers. If users are accessing the website from mobile devices, we will redirect to a ASP.NET MVC area Mobile. For redirecting to the Mobile area, we have used a Global filer for the redirection logic and used open source framework 51Degrees.mobi for the better support for mobile browser detection. In the Mobile area, we have created the pages using jQuery Mobile and users will get mobile friendly web pages. We can create great mobile web apps using ASP.NET MVC and jQuery Mobile Framework.