MVC 4 mobile and tablet view separation

Question

I'm trying to make separate views for Tablet and Mobile. In app_start i have this code

DisplayModeProvider.Instance.Modes.Insert(0, new
        DefaultDisplayMode("Tablet")
        {
            ContextCondition = (ctx =>
            ctx.Request.UserAgent.IndexOf("iPad", StringComparison.OrdinalIgnoreCase) >= 0 ||
            ctx.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0)
        });

I've created two layout files, one for mobile and one for Tablet. But there is conflict when i'm accessing from mobile device which is on Android. It redirects me to layout.tablet. How could i separate those two devices?

Answer 1

I've tested this with user-agent switcher in browser and it works fine.

DisplayModeProvider.Instance.Modes.Insert(0, new
        DefaultDisplayMode("Tablet")
        {
            ContextCondition = (ctx =>
            ctx.Request.UserAgent.IndexOf("iPad", StringComparison.OrdinalIgnoreCase) >= 0 ||
            ctx.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0 && 
            ctx.Request.UserAgent.IndexOf("mobile", StringComparison.OrdinalIgnoreCase) < 1)
        });

        DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("Mobile")
        {
            ContextCondition = (ctx =>
                ctx.GetOverriddenBrowser().IsMobileDevice)
        });

Answer 2

neowinian,

Try adding one additional snippet of logic:

&& ctx.Request.UserAgent.IndexOf("mobile", StringComparison.OrdinalIgnoreCase) < 0

this will exclude all mobile devices from your DisplayMode for tablet.

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Tablet")
{
    ContextCondition = (ctx =>
     (ctx.Request.UserAgent.IndexOf("iPad", StringComparison.OrdinalIgnoreCase) >=0 
       || ctx.Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0) 
       && ctx.Request.UserAgent.IndexOf("mobile", StringComparison.OrdinalIgnoreCase) < 0)
});

additionally, you could look at:

DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("Mobile")
{
    ContextCondition = (ctx =>
        ctx.GetOverriddenBrowser().IsMobileDevice)
});