Shravan Kumar Kasagoni

Skip Navigation
Mobile Application Template in ASP.NET MVC 4

Mobile Application Template in ASP.NET MVC 4

 /  1 response

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.

Write a response

Your email address will not be published. Required fields are marked *

All code will be displayed literally.

Discussion

  • Javaman59 says:

    You asked for a reacion? 🙂

    I liked it! It told me the one thing I’ve been wanting to know for a while now – what exactly does the Mobile template in MVC 4 provide? The answer: it provides jquery.mobile support for mobile web apps. Such specific informatiion is not actually widely available, despite numerous demos and tutorials of MVC for mobiles. So, thank you very much!