Specific View (Asp.net MVC) for IPhone, Android

Question

I am using ..

• ASP.net MVC 4
• 51Degrees.mobi
• jQuery Mobile

By the helping of these technologies, I can make my web application's UI designs look good not only at Desktop based browsers but also at mobile based browsers without requiring me to create projects separately.

But when it comes to more specific mobile devices, I would like to call specific view file.
So I use below code at Global.asax file.

    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);
    }

Unfortunately, Android and IPhone specific view do not load whenever I call pages from IPhone Emulator and Opera Mobile Emulator.

_Layout.cshtml   [loaded from desktop based browser]
_Layout.Android.cshtml [never loaded]
_Layout.iPhone.cshtml  [never loaded]
_Layout.Mobile.cshtml  [loaded from mobile based any browser including iphone, opera] 

What I assume that something wrong is I get only two files when I downloaded from 51Degrees.mobi by using NuGet package.

FiftyOne.Foundation.dll
51Degrees.mobi.config

Even though I think I should get App_Data/Devices.dat but I still only get these two files from 51Degrees.mobi.

Could anyone please give suggestion to me how I could call specific view for IPhone and Android? Every suggestion will be appreciated.

Answer 1

I have just done exactly this and had the same behaviour. For starters the NuGet package is correct. The device.dat file used to be stored in APP_Data however if you are using the 'lite' version this is now embedded inside the FiftyOne.Foundation.dll.

To fix the iPhone this is a case senesitive test. FiftyOne sets the MobileDeviceModel to 'IPhone' (capital I) - This worked with the electric plum iphone emulator.

For android to work it seems that the 'lite' version doesn't set the platform to 'Android'. Easy workaround is to use the UserAgent string. i.e. ContextCondition = Context => Context.GetOverriddenUserAgent().Contains("Android")

Finally you need to be careful about how you insert these items into the collection. The code above inserts the Android rule then Inserts the IPhone rule (so android is now in position 1 in the collection) Then inserts the Mobile rule in position 1 - so the collection ends up looking like: IPhone Mobile Android

As such an android device will always choose the Mobile rule first and never display the Android specific browser page. So change the Inserts to 0,1 & 2 in the order above. This gives the same order as the code and everything works just fine.

As an aside to fit with the ASP.Net MVC 4 initilisation style I separated this code out into the APP_Start folder in its own class ie.

public class DeviceConfig
{
    public static void RegisterDevices(IList<IDisplayMode> modes)
    {
        //The Android view
        modes.Insert(0, new DefaultDisplayMode("android")
        {
            ContextCondition = Context => Context.GetOverriddenUserAgent().Contains("Android")
        });

        //The iPhone view
        modes.Insert(1, 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
        modes.Insert(2, new DefaultDisplayMode("mobile")
        {
            ContextCondition = Context => Context.Request.Browser.IsMobileDevice
        });
    }
}

and then in Global.asax.cs

    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        DeviceConfig.RegisterDevices(DisplayModeProvider.Instance.Modes);
    }