CODEWITHSUNDEEP
c#asp.net-mvc
jasenkoh
jasenkoh

Reputation: 4161

MVC 4 mobile and tablet view separation

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?

Upvotes: 6

Views: 4529

Answers (4)

Zarwalski
Zarwalski

Reputation: 69

You can use 51Degrees' free cloud based solution to help you detect different device types. Using the IsMobile and IsTablet properties, you can redirect depending on the result. You can get the Free cloud product from the website and get a Free Cloud Key. For information how to use the API you can see tutorials here. https://51degrees.com/Developers/Documentation/APIs/Cloud-API/NET-Cloud

For example you could make a request to return the Device Type similar to what is shown below, then put in your redirect logic based on the response.

@using (var webClient = new System.Net.WebClient())
{
  string json = webClient.DownloadString(String.Format(
  "https://cloud.51degrees.com/api/v1/{0}/match?user-agent=
{1}&values=DeviceType",
  "YOUR KEY HERE",
  HttpUtility.UrlEncode(Request.UserAgent)));

dynamic match = Newtonsoft.Json.Linq.JObject.Parse(json);
  SortedList<string, string[]> values = Newtonsoft.Json.JsonConvert.DeserializeObject<SortedList<string, string[]>>(match.Values.ToString());
  string[] hvValues;

 if (values.TryGetValue("DeviceType", out hvValues))
  {
foreach (string s in hvValues)
{
<h4>
    Device Type:
    @s
</h4>
}
  }

Disclosure: I work at 51Degrees.

Upvotes: 0

jasenkoh
jasenkoh

Reputation: 4161

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

Upvotes: 8

jim tollan
jim tollan

Reputation: 22485

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

Upvotes: 1

starskythehutch
starskythehutch

Reputation: 3338

Have you had a look at a service like http://51degrees.mobi that does all the user-agent/device heavy lifting for you? Whilst it is not free, they do a "lite" version that gives you a lot of what you need, although I notice "IsTablet" is something in their premium version.

Upvotes: 0

Related Questions