Blogs Search

Blogs

Published on Friday, September 23, 2011

51Degrees.mobi and MVC4

51Degrees.mobi 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 51Degrees.mobi 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/51degrees.mobi.config. 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 51Degrees.mobi.config. 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()
{
     AreaRegistration.RegisterAllAreas();
 
     RegisterGlobalFilters(GlobalFilters.Filters);
     RegisterRoutes(RouteTable.Routes);
}

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()
{
     AreaRegistration.RegisterAllAreas();
 
     //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
     });
 
     RegisterGlobalFilters(GlobalFilters.Filters);
     RegisterRoutes(RouteTable.Routes);
}

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

51Degrees.mobi 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: Tom Holmes

Categories: Development

Tags: Mobile, Microsoft, MVC4

Tom Holmes
>

Tom Holmes

Other posts by Tom Holmes

1 comments on article "51Degrees.mobi and MVC4"

Chip Burris

11/8/2011 5:33 PM


Very Good write up on MVC4 mobile routing, even better since it uses the 51degrees.mobi 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
{Viewname}.mobile.{fileType}

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

Chip


Leave a comment

Name:
Email:
Comment:
CAPTCHA image
Enter the code shown above in the box below
Add comment