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!

Close Bitnami banner
Bitnami