51Degrees.mobi and MVC4
Sep23Written by:tom
9/23/2011 2:21 PM 
51Degrees.mobi and MVC4
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.
Copyright ©2011 Tom Holmes
1 comment(s) so far...
Re: 51Degrees.mobi and MVC4
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
By ChipBurris on
11/8/2011 5:33 PM
|