Mobile ASP .NET MVC

On the recent iWantGreatCare Proof of Concept, one of the things I did was to enable a mobile version of the site.  It turned out to be very straightforward.  The first issue is to be able to detect if the device accessing your site is a mobile device.  I used WURFL, which is an XML file that contains all sorts of information about devices and their capabilities, and queried the XML directly with LINQ to XML.  My method to detect a mobile was very simple, as we weren’t concerned in the Proof of Concept with device capabilities:

private static bool IdentifyMobileDevice(string userAgent)

{

    return (from element in wurflXml.Elements("devices").Elements("device")

            where (string)element.Attribute("user_agent") == userAgent

            select element).Count() > 0;

}

wurflXml  is declared as follows:

private static XElement wurflXml;

and is initialised by reading in the WURFL XML file (in this case held as an embedded resource.)

After we had completed the Proof of Concept, the Mobile Device Browser File was released, which is even easier to use in ASP .NET (and ASP.NET MVC) since it exposes the information through the Request.Browser property.

Once you know you can detect mobile devices, you need to do something to serve them appropriate content.  With ASP .NET MVC the obvious approach is to leave the model and controllers and to provide mobile specific views.  I used an ActionFilter to achieve this end.  To do this, I created a new class that derives from ActionFilter –I called it MobileFilter – and overrode the OnActionExecuted method.  In this method, I simply test to see if the request has come from a mobile device and if so swap the view for a mobile view (in the tradition of convention over configuration, this was done by adding a suffix – .mobile – to the original view name.)  Here’s the fragment of code taken from the OnActionExecuted method that sets the new View:

ViewResult result = new ViewResult

{

    ViewName = string.Format("{0}{1}", viewName, MOBILE_SUFFIX),

    ViewData = currentResult.ViewData,

    TempData = currentResult.TempData

};

 

filterContext.Result = result;

filterContext.HttpContext.Response.Clear();

In order to use the ActionFilter it needs to be wired into the Controllers.  This is done with an attribute.  So each Controller that needs to be mobile enabled has a [MobileFilter] attribute applied at class level.  Here’s the HomeController as an example:

[MobileFilter]

public class HomeController : Controller

{

    public ActionResult Index()

    {

        return View();

    }

}

That’s all there is to it.  By following those simple steps, you can easily add mobile support to your ASP .NET MVC site.  Of course, you need to think about the user experience on mobile devices and whether you want to differentiate between devices based on their capabilities.  After having completed the Proof of Concept, I was interested to read Scott Hanselman’s post on this topic which uses a slightly different technique – he creates a ViewEngine which means every request passes through it, rather than marking up Controllers as I did – and shows differentiating between devices.  There was also a session at Mix on this topic, which you can watch here.