ASP.NET MVC 4 puts its focus on making it easier to develop mobile web applications. In this hands-on lab, you will start with the MVC 4 Internet Application project template and create a Photo Gallery application. You will progressively enhance the application using jQuery Mobile together with MVC 4 new features, to make it work great across different mobile devices and desktop web browsers. You will also learn about new code recipes for code generation and how MVC 4 makes it easier to write asynchronous action methods by supporting ActionResult return types.


ASP.NET MVC 4 is a framework for building scalable, standards-based web applications using well-established design patterns and the power of the ASP.NET and the .NET framework. This new, fourth version of the framework focuses on making mobile web application development easier.

To begin with, when you create a new MVC 4 project there is now a mobile application project template you can use to build a standalone app specifically for mobile devices. Additionally, MVC 4 integrates with jQuery Mobile through a jQuery.Mobile.MVC NuGet package. jQuery Mobile is an HTML5-based framework for developing web apps that are compatible with all popular mobile device platforms, including Windows Phone, iPhone, Android and so on. However, if you need specialization, MVC 4 also enables you to serve different views for different devices and provide device-specific optimizations.

In this hands-on lab, you will start with the MVC 4 “Internet Application” project template to create a Photo Gallery application. You will progressively enhance the app using jQuery Mobile and MVC 4’s new features to make it compatible with different mobile devices and desktop web browsers. You will also learn about new code recipes for code generation and how MVC 4 makes it easier for you to write asynchronous action methods by supporting Task<ActionResult> return types.


In this hands-on lab, you will learn how to:

·    Take advantage of the enhancements to the ASP.NET MVC project templates ― including the new mobile application project template

·    Use the HTML5 viewport attribute and CSS media queries to improve the display on mobile devices

·    Use jQuery Mobile for progressive enhancements and for building touch-optimized web UI

·    Create mobile-specific views

·    Use the view-switcher component to toggle between mobile and desktop views in the application

·    Create asynchronous controllers using task support

MVC 3 vs. MVC 4

If you are planning to do a lot of mobile development, and your release date is still many months away, consider developing with MVC4, because they have added many new mobile features.  MVC4 also adds a bunch of other stuff that you might be interested in.  If you don't care about anything that MVC4 adds, just use MVC3 as it is the most recent production version.


You cannot use routing or web.config files to secure your MVC application. The only supported way to secure your MVC application is to apply the Authorize attribute to each controller and use the new AllowAnonymous attribute on the login and register actions. Making security decisions based on the current area is a Very Bad Thing and will open your application to vulnerabilities. 

Web.config-based security should never be used in an MVC application. The reason for this is that multiple URLs can potentially hit a controller, and putting these checks in Web.config invariably misses something.

There is a fundamental difference in protected resources between WebForms and MVC.  In WebForms, the resources you're trying to protect are the pages themselves, and since the pages exist on disk at a well-known path you can use Web.config to secure them.  However, in MVC, the resources you're trying to protect are actually controllers and actions, not individual paths and pages. If you try protecting the path rather than the controller, your application likely has security vulnerability.

In MVC, by default all controllers + actions are accessible to all users, both authenticated and guest.

Mobile application development

One interesting feature of this new version of the ASP.NET MVC framework 4 is the new Mobile Application template. With this template you’ll be able to develop quickly a website especially for mobile and tablet.

ASP.NET MVC 4 Mobile features

Beginning in version 3 (and enhanced in version 4), the ASP.NET MVC Framework provides a set of features that help make mobile web development a bit more straightforward.

The ASP.NET MVC 4 Mobile Template
Display Modes
jQuery Mobile

If you want to create a purely mobile web application from scratch, ASP.NET MVC 4 includes a Mobile Application template that allows you to jump-start your mobile application development. Just like the regular MVC web application templates, it automatically adds scaffolding code to render mobile specific views sets up jQuery Mobile MVC NuGet packages and creates a bare-bones application for you to build upon.

To make it easier to target different devices, the ASP.NET MVC 4 Framework offers Display Modes, a feature that helps to detect and cater to different devices.

Nearly every mobile device has different resolutions, different browser behavior, and even different features that your web application is able to take advantage of.

Instead of retrofitting all possible device variations into a single view, you can isolate different behaviors and features into separate, device specific views.

The jQuery Mobile Framework brings all the richness and goodness of jQuery and jQuery UI to mobile applications. Instead of you having to deal with the browser inconsistencies for different devices, it allows you to create a single application that works on all modern mobile devices. It brings down the virtues of progressive enhancement techniques and provides a flexible design so that older devices can still see a functional but not as pretty or rich application, while allowing modern devices to benefit from all the rich interactivity that comes with newer HTML5 features. The jQuery Mobile Framework also has great theme support, which makes it very easy to create a branded site with rich user experience that doesn’t sacrifice the benefits of progressive enhancement. Throughout this chapter, you’ll see how the jQuery Mobile Framework makes it easy and simple to take your application to the next level.

  Modified On Sep-18-2014 01:24:05 PM

Leave Comment