Question

In MVC 4, you can just append .Mobile to any view and mobile devices will automatically get served that view from the same controller. Is there a way to store the .Mobile files in a different folder? I really want to store the desktop files in one “Area” and the mobile in another “Area”. Anyone know of something like this?

Answer 1

This can easily be accomplished by creating a custom implementation of RazorViewEngine and adding the custom mappings to the ViewLocationFormats. It is important to remember to add the custom mappings to the beginning of the ViewLocationFormats array as they are more specific than the existing mappings.

namespace MobileViewsInMobileFolder.Utility {

    public class MyCustomViewEngine : RazorViewEngine {

         public MyCustomViewEngine() {
             List<string> existingViewLocationFormats = ViewLocationFormats.ToList();

             //Folder Structure: Views\Home\Desktop and Views\Home\Mobile
             existingViewLocationFormats.Insert(0, "~/Views/{1}/Desktop/{0}.cshtml");
             existingViewLocationFormats.Insert(0, "~/Views/{1}/Mobile/{0}.cshtml");

             //Folder Structure: Views\Desktop\Home and Views\Mobile\Home
             existingViewLocationFormats.Insert(0, "~/Views/Desktop/{1}/{0}.cshtml");
             existingViewLocationFormats.Insert(0, "~/Views/Mobile/{1}/{0}.cshtml");

             ViewLocationFormats = existingViewLocationFormats.ToArray();
         }
    }
}

And then make sure to add the custom view engine in the Application_Start

ViewEngines.Engines.Clear();
ViewEngines.Engines.Add(new MyCustomViewEngine());