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 optimized web pages based on 1000s of relevant device characteristics such as screen size, platform, input method or accepted content types particularly video.