September 18, 2011 Nandip Makwana comment jQuery , jQuery Mobile , MVC , MVC 4

ASP.NET MVC 4 Mobile Project Template

This post is part of ASP.NET MVC 4 Article Series.

With ASP.NET MVC 4, it’s even easier to setup and carry out a project which target mobile and tablet device. Yes MVC team introduce a new project template with MVC 4 which target mobile and tablet platform. This project template is build on the base of jQuery Mobile. And hence it is also optimized for better experience for touch screen.

To get started with Mobile Project Template in MVC 4

Create a new ASP.NET MVC 4 Web Application
Select Mobile Application template when it ask to select project template

As far as the server side code (Controller, Model) is concern, it is same structured as Internet Application template. But responsibility of well rendering and well behavior for touch media is left on jQuery Mobile.

Inspecting Script folder of Internet Application Template and Mobile Project Template, you will find additional jquery.mobile-1.0b2.js file which is core script of jQuery Mobile included in Mobile Project Template of MVC 4.

Internet Application Project

Mobile Project

Another major difference between Internet Application Template and Mobile Project Template is in its view. Inspecting _Layout.cshtml, you will notice some additional script reference and script in Mobile Project which is used by mobile or template device. In addition to script, another major difference in MVC 4 Mobile Project Template View is use of data-role and other attribute which is required for Mobile page structure and it used by mobile device and jQuery Mobile for proper rendering and behavior in touch screen and Smartphone. You can get more information regarding this here.