Mobile Application Template in ASP.NET MVC 4

Nowadays everyone carrying either smart phone or tablet. It’s very important for web developers to build application which works seamlessly on both desktop & mobile browsers.

ASP.NET MVC 4 Developer Preview has good support for building mobile web apps. The New ASP.NET MVC 4 Project dialog includes one more additional template i.e: Mobile Application along with old 3 existing templates (Empty, Internet Application, Intranet Application), This new template is based on jQuery Mobile Framework (http://jquerymobile.com).

jQuery Mobile is touch-optimized Web Framework for Smartphones & Tablets. It’s unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.

Lets explore the complete mobile application template, through this article, I will compare the new mobile application template with Internet Application / Intranet Applications templates.

Have look at HomeController.cs :

So there is no change in the HomeController code, even if you look at AccountController code also there is no change.

Have a look at Project Structure:

If we look inside the Content folder, it includes new css file jquery.mobile-1.0b2.css / jquery.mobile-1.0b2.min.css (minified version). jquery.mobile-1.0b2.css includes all the styles required by jQuery Mobile Framework. If we look at inside the Scripts folder, it includes new JavaScript file jquery.mobile-1.0b2.js / jquery.mobile-1.0b2.min.js (minified version). jquery.mobile-1.0b2.js is core script of jQuery Mobile Framework.

Finally coming to rendering output i.e: Views, Mobiles / Tablets displays are comparatively small with Desktop/Laptops. We need different view optimized for Mobile / Tablets. New template includes views optimized for Mobile / Tablets & they also use adaptive render to fit into various display sizes.

Have look at _Layout.cshtml :

• If we inspect _Layout.cshtml it includes new css & JavaScript files which explained above.
• It includes a meta tag <meta name=”viewport” content=”width=device-width” />.
  • The <meta name=”viewport”/> meta tag can be used to control how HTML content will appear in mobile browsers or to control zoom in Mobile Browsers.
  • The <meta name=”viewport”/> meta tag includes content=”width=device-width” attribute , specifies viewport width will be set the width of the device display.

Lets run the application & see the final output. To view output I am using Windows Phone 7 Emulator.

These are couple changes in mobile application template, in future I will more in depth content for building mobile applications using ASP.NET MVC 4.