如何根据设备类型更改 ASP.NET MVC 视图？

Question

我正在阅读一些 ASP.NET MVC 文章，并且我正在工作一个 Web 应用程序，我将从 WebForms 迁移到 MVC。我希望在此过程中获得的功能请求之一是，如果用户来自移动设备，则返回简化的视图。

我不太明白哪里是实现这种逻辑的最佳位置。我确信有比在返回视图的每个操作中为 Browser.IsMobileDevice 添加 if/else 更好的方法。我必须采取什么样的选择才能做到这一点？

Answer 1

更新：这个解决方案有一个微妙的错误。 MVC 框架将调用 FindView/FindPartialView 两次：一次使用 useCache=true，如果不返回结果，则使用一次useCache=false。由于所有类型的视图只有一个缓存，因此如果桌面浏览器首先到达，移动用户最终可能会看到桌面视图。

对于那些有兴趣使用自定义视图引擎来解决此问题的人，Scott Hanselman 在这里更新了他的解决方案：

http: //www.hanselman.com/blog/ABetterASPNETMVCMobileDeviceCapabilityViewEngine.aspx

（对答案劫持表示歉意，我只是不想让其他人经历这个！）

由 roufamatic 编辑（2010-11） -17)

---

您要做的第一件事是将 移动设备浏览器文件 引入您的项目。使用此文件，您可以定位您想要支持的任何设备，而无需知道这些设备在标头中发送的内容的具体信息。该文件已经为您完成了这项工作。然后，您可以使用 Request.Browser 属性来定制要返回的视图。

接下来，制定一个关于如何在“视图”文件夹下组织视图的策略。我更喜欢将桌面版本保留在根目录，然后有一个移动文件夹。例如，主页视图文件夹将如下所示：

• 主页
  • 手机
    • iPhone
      • 索引.aspx
    • 黑莓
      • 索引.aspx
  • 索引.aspx

我不同意@Mehrdad关于使用自定义视图引擎的观点。视图引擎有多个用途，其中之一就是为控制器查找视图。您可以通过重写 FindView 方法来完成此操作。在此方法中，您可以检查在哪里可以找到视图。在知道哪个设备正在使用您的网站后，您可以使用您为组织视图而想出的策略来返回该设备的视图。

public class CustomViewEngine : WebFormViewEngine
{
    public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {
        // Logic for finding views in your project using your strategy for organizing your views under the Views folder.
        ViewEngineResult result = null;
        var request = controllerContext.HttpContext.Request;

        // iPhone Detection
        if (request.UserAgent.IndexOf("iPhone",
   StringComparison.OrdinalIgnoreCase) > 0)
        {
            result = base.FindView(controllerContext, "Mobile/iPhone/" + viewName, masterName, useCache);
        }

        // Blackberry Detection
        if (request.UserAgent.IndexOf("BlackBerry",
   StringComparison.OrdinalIgnoreCase) > 0)
        {
            result = base.FindView(controllerContext, "Mobile/BlackBerry/" + viewName, masterName, useCache);
        }

        // Default Mobile
        if (request.Browser.IsMobileDevice)
        {
            result = base.FindView(controllerContext, "Mobile/" + viewName, masterName, useCache);
        }

        // Desktop
        if (result == null || result.View == null)
        {
            result = base.FindView(controllerContext, viewName, masterName, useCache);
        }

        return result;
    }
}

上面的代码允许您根据您的策略设置视图。如果没有找到设备的视图或者没有默认的移动视图，则后退是桌面视图。

如果您决定将逻辑放入控制器中而不是创建视图引擎。最好的方法是创建自定义 ActionFilterAttribute 你可以用它来装饰你的控制器。然后重写 OnActionExecuted 方法来确定哪个设备正在查看您的网站。您可以查看这篇博客文章了解如何操作。这篇文章还提供了一些关于这个主题的 Mix 视频的一些不错的链接。

Answer 2

在模型-视图-控制器模式中，是控制器选择视图，因此，添加 if 语句并返回适当的视图也不错。您可以将 if 语句封装在一个方法中并调用它：

return AdaptedView(Browser.IsMobileDevice, "MyView.aspx", model);

或者，您可以创建一个视图引擎，根据视图是否移动来动态执行该视图。我不喜欢这种方法，因为我相信控制器应该负责。例如，如果您在 iPhone 上浏览，您可能想查看完整的桌面版本。在前一种方法中，您将传递适当的布尔标志，但在后一种方法中，事情变得更加复杂。

Answer 3

这是一个实际可以工作的版本，无论是在 T4MVC 还是在发布模式下（启用视图缓存）。它也确实处理用户控件和绝对/相对 URL。它需要移动设备浏览器文件。

public class MobileCapableWebFormViewEngine : WebFormViewEngine
{

    protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
    {
        if (viewPath.EndsWith(".ascx"))
            masterPath = "";
        return base.CreateView(controllerContext, viewPath, masterPath);
    }
    public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {
        useCache = false;
        ViewEngineResult result = null;
        var request = controllerContext.HttpContext.Request;

        if (request.Browser.IsMobileDevice || request["mobile"] != null || request.Url.Host.StartsWith("m."))
        {
            var mobileViewName = GetMobileViewName(viewName);

            result = base.FindView(controllerContext, mobileViewName, masterName, useCache);
            if (result == null || result.View == null)
            {
                result = base.FindView(controllerContext, viewName, "Mobile", useCache);
            }
        }

        if (result == null || result.View == null)
        {
            result = base.FindView(controllerContext, viewName, masterName, useCache);
        }

        return result;
    }

    private static string GetMobileViewName(string partialViewName)
    {
        var i = partialViewName.LastIndexOf('/');
        return i > 0
                   ? partialViewName.Remove(i) + "/Mobile" + partialViewName.Substring(i)
                   : "Mobile/" + partialViewName;
    }
}

Answer 4

我认为插入此功能的正确位置是自定义 ViewEngine。但您应该了解 ViewEngineCollection 如何调用 IViewEngine.FindView 方法（有关此内容的更多信息此处）。

Scott Hanselman 建议的更新的解决方案无法正常工作。您可以在此处找到我对此方法的示例实现。检查描述如何重复错误行为的自述文件。

我建议使用另一种方法来检查原始 ViewEngine 是否未找到视图，并且如果 useCache 参数为 true，则使用参数 useCache 检查原始 ViewEngine 中是否存在视图=假。

将所有代码放在这里太复杂，但您可以找到在我的开源游乐场中实现的建议方法 这里。检查 MobileViewEngine 类和单元测试。

一些 MobileViewEngine 功能：

• 与视图缓存一起正常工作并使用原始视图引擎缓存。
• 支持：MvcContrib T4 模板使用的镜头视图名称和相对视图路径 (~/Views/Index)。
• 解决“索引”视图如下：
  • 移动/平台/索引 – 如果视图存在并且移动设备平台（iPhone、Android 等）已列入受支持的列表。
  • 移动/索引 - 所有其他移动设备的视图。如果视图不存在，您可以选择回退到桌面视图版本。
  • Index – 适用于桌面视图版本。
• 您可以自定义移动视图层次结构（例如 Mobile/ Platform/Manufacturer），或通过添加/更改设备规则来自定义移动视图路径分辨率（请参阅 MobileDeviceRule 和 PlatformSpecificRule代码>）。

希望这会有所帮助

Answer 5

您的核心逻辑在控制器中应该是相同的，并且只有您需要的视图会改变，因此控制器是您确实需要 if/else 语句的地方，以便为您所说的每个控制器操作提供正确的视图。

另一种方法是将控制器逻辑包装在单独的 dll 中，然后为移动版本提供不同的控制器/路径。如果常规控制器收到来自移动设备的请求，您可以将它们重定向到您的移动区域，其中包含使用共享控制器逻辑的所有移动控制器。该解决方案还允许您执行特定于移动控制器的“tweeks”，并且不会影响您的常规控制器。