How Would I Change ASP.NET MVC Views Based on Device Type?

Solution 1:

Update: This solution has a subtle bug. The MVC framework will call into FindView/FindPartialView twice: once with useCache=true, and if that doesn't return a result, once with useCache=false. Since there's only one cache for all types of views, mobile users may end up seeing desktop views if a desktop browser was first to arrive.

For those interested in using custom view engines to solve this problem, Scott Hanselman has updated his solution here:

http://www.hanselman.com/blog/ABetterASPNETMVCMobileDeviceCapabilitiesViewEngine.aspx

(Apologies for the answer hijack, I just don't want anyone else to have to go through this!)

Edited by roufamatic (2010-11-17)

The first thing you want to do is introduce the Mobile Device Browser File to your project. Using this file you can target what ever device you want to support without having to know the specifics of what those devices send in their headers. This file has already done the work for you. You then use the Request.Browser property to tailor which view you want to return.

Next, come up with a strategy on how you want to organize your views under the Views folder. I prefer to leave the desktop version at the root and then have a Mobile folder. For instance the Home view folder would look like this:

• Home
  • Mobile
    • iPhone
      • Index.aspx
    • BlackBerry
      • Index.aspx
  • Index.aspx

I have to disagree with @Mehrdad about using a custom view engine. The view engine serves more than one purpose and one of those purposes is finding views for the controller. You do this by overriding the FindView method. In this method, you can do your checks on where to find the view. After you know which device is using your site, you can use the strategy you came up with for organizing your views to return the view for that device.

public class CustomViewEngine : WebFormViewEngine
{
    public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {
        // Logic for finding views in your project using your strategy for organizing your views under the Views folder.
        ViewEngineResult result = null;
        var request = controllerContext.HttpContext.Request;

        // iPhone Detection
        if (request.UserAgent.IndexOf("iPhone",
   StringComparison.OrdinalIgnoreCase) > 0)
        {
            result = base.FindView(controllerContext, "Mobile/iPhone/" + viewName, masterName, useCache);
        }

        // Blackberry Detection
        if (request.UserAgent.IndexOf("BlackBerry",
   StringComparison.OrdinalIgnoreCase) > 0)
        {
            result = base.FindView(controllerContext, "Mobile/BlackBerry/" + viewName, masterName, useCache);
        }

        // Default Mobile
        if (request.Browser.IsMobileDevice)
        {
            result = base.FindView(controllerContext, "Mobile/" + viewName, masterName, useCache);
        }

        // Desktop
        if (result == null || result.View == null)
        {
            result = base.FindView(controllerContext, viewName, masterName, useCache);
        }

        return result;
    }
}

The above code allows you set the view based on your strategy. The fall back is the desktop view, if no view was found for the device or if there isn't a default mobile view.

If you decide to put the logic in your controller's instead of creating a view engine. The best approach would be to create a custom ActionFilterAttribute that you can decorate your controller's with. Then override the OnActionExecuted method to determine which device is viewing your site. You can check this blog post out on how to. The post also has some nice links to some Mix videos on this very subject.

Solution 2:

In the Model-View-Controller pattern, it's the controller that chooses view, so, it's not that bad to add an if statement and return an appropriate view. You can encapsulate the if statement in a method and call it:

return AdaptedView(Browser.IsMobileDevice, "MyView.aspx", model);

Alternatively, you can create a view engine that dynamically executes a view based on whether it's mobile or not. I'm not a fan of this approach since I believe the controller should be in charge. For instance, if you're browsing on iPhone, you might want to see the full desktop version instead. In the former approach, you'd pass the appropriate boolean flag but in the latter, things become more complicated.

Solution 3:

This is a version which actually works, both with T4MVC and in release mode (where caching of views is enabled). It does take care of usercontrols and absolute/relative urls as well. It requires the Mobile Device Browser File.

public class MobileCapableWebFormViewEngine : WebFormViewEngine
{

    protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
    {
        if (viewPath.EndsWith(".ascx"))
            masterPath = "";
        return base.CreateView(controllerContext, viewPath, masterPath);
    }
    public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {
        useCache = false;
        ViewEngineResult result = null;
        var request = controllerContext.HttpContext.Request;

        if (request.Browser.IsMobileDevice || request["mobile"] != null || request.Url.Host.StartsWith("m."))
        {
            var mobileViewName = GetMobileViewName(viewName);

            result = base.FindView(controllerContext, mobileViewName, masterName, useCache);
            if (result == null || result.View == null)
            {
                result = base.FindView(controllerContext, viewName, "Mobile", useCache);
            }
        }

        if (result == null || result.View == null)
        {
            result = base.FindView(controllerContext, viewName, masterName, useCache);
        }

        return result;
    }

    private static string GetMobileViewName(string partialViewName)
    {
        var i = partialViewName.LastIndexOf('/');
        return i > 0
                   ? partialViewName.Remove(i) + "/Mobile" + partialViewName.Substring(i)
                   : "Mobile/" + partialViewName;
    }
}

Solution 4:

I think that the right place to plug this functionality is custom ViewEngine. But you should be aware of how IViewEngine.FindView method is called by the ViewEngineCollection (find more on this here).

Updated solution suggested by Scott Hanselman does not work correctly. You can find my sample implementation of this approach here. Check readme file that describes how you can repeat incorrect behavior.

I suggest another approach that checks if a view was not found by original ViewEngine and if useCache parameter is true, it checks if view exist in original ViewEngine with parameter useCache=false.

It is too complex to put all code here but you can find the suggested approach implemented in my open-source playground here. Check MobileViewEngine class and unit-tests.

Some MobileViewEngine features:

• Works correctly with view caching and uses original view engine cache.
• Supports both: shot view names and relative view paths (~/Views/Index) used by MvcContrib T4 template.
• Resolves "Index" view as following:
  • Mobile/Platform/Index – if view exists and a mobile device platform (IPhone, Android etc.) is enlisted in supported list.
  • Mobile/Index - view for all other mobile devices. If the view does not exists you can optionally fallback to desktop view version.
  • Index – for desktop view version.
• You can customize mobile view hierarchy (e.g. Mobile/ Platform/Manufacturer) or customize mobile view path resolution by adding/changing device rules (see MobileDeviceRule and PlatformSpecificRule).

Hope, this will help