Using 51Degrees with MVC3 to detect mobile devices

In a recent project I had to come up with a clever way to sniff the browser type out and then properly display either a mobile or native web site. I researched a few different solutions, but after conversing with my boss, @jimzim, he had a prototype of 51 Degrees Foundation in MVC3 whipped up in no time.

The Quick & Dirty

Basically the nuts and bolts of it is that the FiftyOne.Foundation intercepts your request object and adds several properties for you to use to determine the device type. Most notably the bool:

In MVC3 we created two different layout pages, _Layout.cshtml ( the MVC3 default) and _LayoutMobile.cshtml. This allowed us to modify the _ViewStart.cshtml file like so:


The only difference between the layouts was the stylesheet references, one for mobile and one for native and then the viewport modifications I made to lay it out properly for the mobile device:

<meta name=”viewport” content=”width=device-width,height=640, initial-scale=1, maximum-scale=1″ />
 
 
Clearly you can see where this is going. If you can’t. Quit now. :-)
 

The Setup

For the configuration, use NuGet to add the Library package reference (Just search 51):

If you are the command-line guy (kind of like “Blackberry guy” but more militant) use:

PM> install-package 51Degrees.mobi

This will:

  • add the FiftyOne.Foundation reference for you
  • add an App_Data directory (unless you have one already)
  • add 3 files in the App_Data directory: Log.txt, web_browsers.patch.txt and wurfl.xml.gz
  • add a configSection group in your web.config with two sections, one for the log and one for the wurfl reference. More on the wurfl reference here

Inside the config you will now see a myriad of options. I kept it simple and just included the log file path, wurfl file path and browser patch.

The Lone Gotcha

So, you think you are all setup. Locally it will run fine. But if you try to deploy this somewhere, like say Azure, it will fail because you didn’t do one thing:

Rookie mistake. Just set the properties of the wurfl.xml.gz file for Build Action to “Content” and Copy always for the Copy to Output Directory if it’s not already set.

The Summary

This couldn’t have been simpler. We created one layout with two different styles based on mobile or native browsers and we pulled it off successfully. The power of MVC3 and NuGet saved the day, along with a little help from 51Degrees.

About these ads

5 thoughts on “Using 51Degrees with MVC3 to detect mobile devices

  1. Strange, because I’m using VS 2010 with an ASP.NET MVC2 project and Azure SDK 1.4. I have all my stuff set to “Content” and “Copy Always”. When the cspkg is set up, there is nothing in the “App_Data” folder under the web role

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s