MVC 4移动和平板电脑视图分离

时间:2012-07-18 10:53:31

标签: c# asp.net-mvc

我正在尝试为平板电脑和移动设备制作单独的视图。在app_start中我有这段代码

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

我创建了两个布局文件,一个用于移动设备,另一个用于平板电脑。但是当我从Android上的移动设备访问时存在冲突。它将我重定向到layout.tablet。我怎么能把这两个设备分开?

4 个答案:

答案 0 :(得分:8)

我在浏览器中使用用户代理切换器对此进行了测试,它运行正常。

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

答案 1 :(得分:1)

neowinian,

尝试添加一个额外的逻辑片段:

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

这将从平板电脑的DisplayMode中排除所有移动设备。

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

另外,你可以看一下:

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

答案 2 :(得分:0)

您是否看过像http://51degrees.mobi这样的服务,为您完成所有用户代理/设备繁重的工作?虽然它不是免费的,但它们会提供一个“精简”版本,可以为您提供所需的许多内容,但我注意到“IsTablet”是其高级版本中的一部分。

答案 3 :(得分:0)

您可以使用51Degrees的基于免费云的解决方案来帮助您检测不同的设备类型。使用IsMobile和IsTablet属性,您可以根据结果重定向。您可以从网站获取免费云产品并获得免费云密钥。有关如何使用API​​的信息,您可以在此处查看教程。 https://51degrees.com/Developers/Documentation/APIs/Cloud-API/NET-Cloud

例如,您可以请求返回类似于下图所示的设备类型,然后根据响应放入重定向逻辑。

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

披露:我在51Degrees工作。