Switch entre Vista Móvil y Vista de Escritorio
En la actualidad hay dispositivos móviles que presentan un rendimiento superior a algunos equipos de escritorio e inclusive su resolución es mucho mayor, ya se está haciendo común que existan móviles con pantallas superiores a las 5 pulgadas y con más de 1080p de resolución.
Ante este escenario, es muy importante ofrecer la oportunidad que el usuario pueda volver a la versión de escritorio desde el móvil, ya que tal vez la versión móvil no sea lo suficientemente completa o para su resolución no haga falta la vista móvil.
En esta sección veremos como darle la posibilidad al usuario de cambiar entre la vista móvil y la vista de escritorio.
Componente ViewSwitcher
El trabajo de cambiar entre vistas no es algo en lo que deberíamos utilizar tiempo desarrollando, es por ello que al instalar el paquete de jQuery Mobile a través de NuGet obtenemos el componente ViewSwitcher, dicho componente nos facilita una vista parcial y un controlador que nos ayudará a obtener la funcionalidad de cambio de vistas, con ello evitando que debamos realizar una funcionalidad similar por nuestra cuenta.
Veamos en el siguiente código como viene por defecto la vista parcial de este componente:
@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
<div class="view-switcher ui-bar-a">
@if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
{
@: Displaying mobile view
@Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher",
new { mobile = false, returnUrl = Request.Url.PathAndQuery },
new { rel = "external" })
}
else
{
@: Displaying desktop view
@Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher",
new { mobile = true, returnUrl = Request.Url.PathAndQuery },
new { rel = "external" })
}
</div>
}
Vemos que comprueba que tipo de vista estamos mostrando y en caso de ser móvil nos construyen un enlace para ir a la vista de escritorio y en caso contrario hace algo similar pero con el enlace a la vista móvil, esta vista parcial la encontraremos con el nombre: _ViewSwitcher.cshtml, podemos modificarla a nuestro antojo, siempre que respetemos sus partes básicas pero podemos cambiar los nombres de los enlaces si así lo deseáramos.
Método GetOverriddenBrowser()
Este método retorna un objeto con todas las capacidades del navegador y también nos permite forzar las capacidades, así si estamos en un navegador móvil podemos sobrescribir de alguna forma temporal sus atributos para que pueda tomar la vista de escritorio.
Veamos el controlador del ViewSwitcher para hacernos una idea más clara de que hay detrás:
public class ViewSwitcherController : Controller
{
public RedirectResult SwitchView(bool mobile, string returnUrl) {
if (Request.Browser.IsMobileDevice == mobile)
HttpContext.ClearOverriddenBrowser();
else
HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile
: BrowserOverride.Desktop);
return Redirect(returnUrl);
}
}
Vemos acá claramente como al validar si es o no un navegador móvil podemos utilizar la propiedad BorwserOverride e indicarle hacia donde irá la vista, este comportamiento almacena los atributos y propiedades que luego leeremos con GetOverriddenBrowser().
Finalmente en nuestro Layout.mobile.cshtml vamos a agregar una etiqueta HTML justo antes de cerrar el <body> de esta forma tendremos nuestro ViewSwitcher activo:
<div data-role="footer">
@Html.Partial("_ViewSwitcher")
</div>
Finalmente veremos como resultado el enlace en nuestra vista móvil:
Si hacemos click en dicho enlace llegaremos directamente a la versión de escritorio y en dicha versión de escritorio tendremos también la posibilidad de ir a la vista móvil:
Como vemos es bastante sencillo poder hacer nuestra aplicación con vistas móviles más completas y que puedan adaptarse a los nuevos estilos y nuevas tecnologías móviles.
