Question

我正在使用MVC3和Bootstrap Responsive，我想通过Razor（或javascript）检测哪种模式处于活动状态（桌面，平板电脑或手机）以在一种或另一种情况下显示正确的局部视图。

例如：

@if( mode=='phone')
{
    @html.Partial("_partialPhone")
}
@if( mode=='desktop')
{
    @html.Partial("_partialDesktop")
}
...etc

我不想只使用“.visible-phone”“visible-tablet”和“.visible-desktop”css类，因为虽然只显示了一个局部视图，但所有这些视图都加载到DOM中由Razor引擎渲染。这对手机和平板电脑的表现并不好。

任何人都可以帮助我吗？

由于

Answer 1

媒体查询发生在客户端上这基本上是不可能的。

您可以让客户端在cookie中设置其大小，然后在服务器上读取cookie。

Answer 2

你应该能够用MVC4做到这一点（我不知道MVC3中是否存在此功能，但下面网站上的示例使用的是MVC4，这就是我的回复基础）。

Switchable Mobile Views

看来您可以开始创建名为[ActionName]的文件.Mobile.cshtml和ASP.NET在检测到来自移动设备的请求时自动使用这些文件（这似乎是可自定义的，因此您可以创建自己的片剂或其他）。他演示了一些类似于你在Razor中提出的问题 - 他根据当前的显示模式呈现不同的链接，但我认为这也可以渲染不同的部分视图：

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

虽然如果你有单独的移动视图和桌面视图，那么我认为你不需要像你要问的那样在两个部分之间手动切换。

Related information

如何检测“设备模式”（MVC3 + Bootstrap）

2 个答案: