Rozdzielanie widoków mobilnych i tabletów MVC 4

Question

Próbuję tworzyć osobne widoki na tablety i urządzenia mobilne. W app_start mam kod

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

Stworzyłem dwa pliki układu, jeden dla urządzeń mobilnych i jeden dla tabletu. Ale kiedy uzyskuję dostęp do urządzenia mobilnego z Androidem, pojawia się konflikt. Przekierowuje mnie do layout.tablet. Jak mogę oddzielić te dwa urządzenia?

Answer 1

Testowałem to z przełącznikiem użytkownika w przeglądarce i działa dobrze.

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,

spróbować dodać jeden dodatkowy fragment logiki:

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

to wykluczy wszystkie urządzenia mobilne z DisplayMode na tablecie.

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

dodatkowo, można spojrzeć na:

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

Answer 3

Miałeś okiem na usługi jak http://51degrees.mobi że nie wszystkie user-agent/urządzenie podnoszenia ciężkich dla Ciebie? Chociaż nie jest darmowy, robią wersję "lite", która daje ci dużo tego, czego potrzebujesz, choć zauważam, że "IsTablet" jest czymś w ich wersji premium.

Answer 4

można wykorzystywać rozwiązanie oparte 51Degrees' wolne cloud pomóc wykrywać różne rodzaje urządzeń. Korzystając z właściwości IsMobile i IsTablet, możesz przekierować w zależności od wyniku. Możesz pobrać darmową chmurę z witryny i uzyskać bezpłatny klucz chmury. Aby dowiedzieć się, jak korzystać z interfejsu API, możesz zobaczyć tutoriale tutaj. https://51degrees.com/Developers/Documentation/APIs/Cloud-API/NET-Cloud

Na przykład można złożyć wniosek o zwrócenie typu urządzenia podobnego do tego, co pokazano poniżej, a następnie wprowadzić logikę przekierowania na podstawie odpowiedzi.

@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> 
} 
    } 

Ujawnienie: Pracuję w 51Degrees.