MVC 4 móvil y tableta vista separación

Question

Estoy tratando de hacer vistas separadas para Tablet y móvil. En app_start tengo este código

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

He creado dos archivos de diseño, uno para el móvil y otro para la tableta. Pero hay conflicto cuando estoy accediendo desde un dispositivo móvil que está en Android. Me redirige a layout.tablet. ¿Cómo podría separar esos dos dispositivos?

Answer 1

He probado esto con el selector de usuario-agente en el navegador y funciona bien.

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,

Trate de añadir un fragmento adicional de la lógica:

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

este excluirá a todos los dispositivos móviles de su DisplayMode para la tableta.

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

, además, usted podría mirar a:

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

Answer 3

¿Ha tenido un vistazo a un servicio como http://51degrees.mobi que hace todo el agente de usuario/dispositivo de trabajo pesado para usted? Si bien no es gratuito, hacen una versión "lite" que te da mucho de lo que necesitas, aunque noto que "IsTablet" es algo en su versión premium.

Answer 4

Puede utilizar la solución gratuita basada en la nube de 51Degrees para ayudarlo a detectar diferentes tipos de dispositivos. Al usar las propiedades IsMobile e IsTablet, puede redirigir dependiendo del resultado. Puede obtener el producto de la nube gratuita desde el sitio web y obtener una clave gratuita en la nube. Para obtener información sobre cómo usar la API, puede ver tutoriales aquí. https://51degrees.com/Developers/Documentation/APIs/Cloud-API/NET-Cloud

Por ejemplo, puede hacer una solicitud para devolver el Tipo de dispositivo similar a lo que se muestra a continuación, luego ponga su lógica de redirección basada en la respuesta.

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

Divulgación: Trabajo en 51Degrees.