Register  |   |  Account  |  Contact Us

Tag Cloud


.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Alcatel Amazon Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Denver Design Desire Eye Desktop Detection Device Device Data Device Detection Device Popularity Device property Device Types Device Use Display DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany Global Google GSMA Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Lenovo LG Location Log File Analysis LTE Lumia Map Memory Meta Data Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Motorola MVC4 MWC NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC Nokia Non-Mobile NVIDIA Omate Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images RESS Review reviews RIM Ringmark RWD Samsung Scala Screen Screen resolution Screen Size SEO Set Box Set Top Box Sharepoint SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Symbian Tablet Tablets Tesco Testing Top 5 TOTW TV UK Umbraco Update updates US User Agent UserAgent Vendors Version 3 VoLTE Wearable Web WebKit WebMatrix White Paper Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE


Published on Friday, September 23, 2011 and MVC4 and MVC4

This blog was written for the MVC 4 Preview, which has since been released with breaking changes. See our Detector for ASP.NET MVC documentation page for the updated version.

The annual Build conference announced and showcased many exciting innovations from Microsoft, but what interests us the most is the latest version of MVC.

Many of the changes to MVC4 are trying to make it more mobile friendly. As can be seen from Phil Haack’s presentation at Build, MVC now has jQuery Mobile in the box and allows multiple views for each controller depending on the device the server detected; and as Phil said at his talk, "Device detection is not trivial...[51Degrees]... adds a ton of device info to the browser files".

So exactly how would you integrate 51Degrees with MVC4? The Nuget repository along with the manner in which Views can be configured makes the whole process a breeze. This guide describes how to install 51Degrees from Nuget and then how to setup a view for a mobile device.

But first we need to get MVC4.

1. Installing MVC4

MVC4 and Visual Studio 11 haven’t been officially released but previews have been made available for free download so developers can get a feel for the new tools available to them. Visual Studio 11 Developer Preview can be found here, and MVC4 can be found here. In my development I have been using Visual Studio 11 but an MVC4 installer is also available for Visual Studio 2010.

The first step is to create an MVC4 mobile web application. Open a new project and select ASP.NET MVC 4 Web Application from the Visual C#/web template (or Visual Basic, but this guide uses C#). If it isn’t listed make sure you’re viewing .NET Framework 4.5.

You should now have an MVC 4 web application that will compile to show a basic website. Before adding extra views as Phil Haack demonstrated, we’ll be installing Foundation.

2. Installing the Foundation

To install the Foundation we’ll be using Nuget. It is a content delievery system that is now bundled with Visual Studio 11, but if you’re using Visual Studio 2010 the plugin can be downloaded here.

Right click on your project in the Solution Explorer and select ‘Manage Nuget Packages…’, then search for 51Degrees.

51Degress maintains two packages on Nuget, one for ASP.NET and the other specifically for Microsoft WebMatrix. Choose the regular package. It will download the 51Degrees configuration, datafiles for detection and an example aspx page to show how to access device properties programmatically.

3. Configuring the Foundation

By default the Foundation redirects mobiles to an aspx page that lists their features. This page can be found at Mobile/Default.aspx. This can be deleted. The Foundation also has a separate xml configuration that can be accessed at App_Data/ In the App_Data you’ll also find two data files, wurfl.xml.gz and web_browser_patch.xml. Both of these are vital to the Foundation as they contain all the device data.

To use the new features of MVC4 you’ll need to remove some of the configuration from Open the file and remove the entire ‘redirect’ section from ‘fiftyOne’. Device based redirection is no longer needed when multiple views are used.

4. Configuring your MVC Application

A view can be assigned to run under different conditions by adding a suffix before the file extension.

This is how the Solution Explorer looks in the MVC4 Mobile Template. By creating new view pages (or copying the old ones) and naming them in this way you are creating 4 separate views for Index that all use the same Model and Controller. The following screen shot shows views created for Android, iPhone and generic mobile.

To set the conditions for which view is used for which purpose some code needs to go into the Application_Start event. Open the global.asax file and you should see this method:

protected void Application_Start()

It is in this method that you’ll need to register all the views you have and under what conditions and the priority they should be used in.

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("android")
     ContextCondition = Context => Context.Request.Browser.Platform == "Android"

The “android” in the first line specifies the suffix that the DisplayMode will use and must correspond with the name used before the extension of the view page. The number before that specifies the priority, where 0 has the most importance. The third line specifies the condition, in this case if the device operating system is Android.

To create view conditions for all our views (Android, iPhone and mobiles) we need this code:

protected void Application_Start()
     //The Android view
     DisplayModes.Modes.Insert(0, new DefaultDisplayMode("android")
          ContextCondition = Context => Context.Request.Browser.Platform == "Android"
     //The iPhone view
     DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iphone")
          ContextCondition = Context => Context.Request.Browser.MobileDeviceModel == "iPhone"
     //The mobile view
     //This has a lower priority than the other two so will only be used by a mobile device
     //that isn't Android or iPhone
     DisplayModes.Modes.Insert(1, new DefaultDisplayMode("mobile")
          ContextCondition = Context => Context.Request.Browser.IsMobileDevice

And that’s all you need to do. Your MCV4 application will now inspect each device for those conditions and send them to the right view. This feature is very powerful as you can have as many views as you like to cater to each devices needs without having to worry about breaking your site as MVC will choose the best view available.

5. Conclusion with MVC4 provides a powerful solution to display optimised web pages based on 1000s of relevant device characteristics such as screen size, platform, input method or accepted content types particularly video.

Comments (1)

Author: Products Team

Categories: Development

Tags: Mobile, Microsoft, MVC4

Tom Holmes

Products Team

Other posts by Products Team

1 comments on article " and MVC4"

Chip Burris

11/8/2011 5:33 PM

Very Good write up on MVC4 mobile routing, even better since it uses the foundation !
I had the honor of presenting something similar last weekend at the RDU Code camp. I used the user agent string though :( Should have used foundation.

So this leads me to point out a slight technicality.

You had mentioned that for the DisplayModes.Modes.Insert(x , displaymodeitem) that the value for x specifies priority.
DisplayModes is an and Modes.Insert is a standard insert with an index and item. x of course being the index value. if one were to follow the code given above and add more conditional display modes, random behaviors can occur.
The viewengine starts with the very first displaymode in the Displaymodes which is at index 0 and iterates through the Displaymodes until a matching display mode is found.

So far I have found the safest way to explain it is to give every insert an index of 0, and treat it like a stack (LIFO)
So given these inserts in this order in code (no context to keep it simple)
DisplayModes.Modes.Insert(0, new DefaultDisplayMode("Mobile")
DisplayModes.Modes.Insert(0, new DefaultDisplayMode("Tablet")
DisplayModes.Modes.Insert(0, new DefaultDisplayMode("AndroidTablet")

The veiwengine would evaluate for AndroidTablet if that fails go to Tablet, the evaluate for mobile.

It is worth mentioning here that there already is a default DefaultDisplayMode("Mobile") already baked into the framework. Adding another DefaultDiplayMode named mobile does not erase that display mode it just adds another conditional to direct the view engine to use

Pretty sure you know all this. I just wanted to clarify things for other people because of the lack of good information out there.


Please login or register to post comments.