我将如何根据设备类型更改 ASP.NET MVC 视图? [英] How Would I Change ASP.NET MVC Views Based on Device Type?

问题描述

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

I'm working my way through some ASP.NET MVC reading and I have a web app at work that I'll be migrating from WebForms to MVC. One of the feature requests I expect to get in the process is to have a simplified view returned if the user is coming from a mobile device.

我不太清楚实现这种逻辑的最佳位置在哪里.我确信有比在每个返回视图的操作中为 Browser.IsMobileDevice 添加 if/else 更好的方法.我需要什么样的选择才能做到这一点?

I can't quite see where the best place is to implement that type of logic. I'm sure there's a better way than adding an if/else for Browser.IsMobileDevice in every action that returns a view. What kind of options would I have to do this?

推荐答案

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

Update: This solution has a subtle bug. The MVC framework will call into FindView/FindPartialView twice: once with useCache=true, and if that doesn't return a result, once with useCache=false. Since there's only one cache for all types of views, mobile users may end up seeing desktop views if a desktop browser was first to arrive.

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

For those interested in using custom view engines to solve this problem, Scott Hanselman has updated his solution here:

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

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

(Apologies for the answer hijack, I just don't want anyone else to have to go through this!)

由 roufamatic 编辑 (2010-11-17)

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

The first thing you want to do is introduce the Mobile Device Browser File to your project. Using this file you can target what ever device you want to support without having to know the specifics of what those devices send in their headers. This file has already done the work for you. You then use the Request.Browser property to tailor which view you want to return.

接下来，提出一个关于如何在 Views 文件夹下组织视图的策略.我更喜欢将桌面版本留在根目录，然后有一个 Mobile 文件夹.例如，主视图文件夹如下所示:

Next, come up with a strategy on how you want to organize your views under the Views folder. I prefer to leave the desktop version at the root and then have a Mobile folder. For instance the Home view folder would look like this:

• 首页
  • 移动设备
    • iPhone
      • 索引.aspx
      • 索引.aspx

      我不同意@Mehrdad 关于使用自定义视图引擎的观点.视图引擎的用途不止一个，其中之一就是为控制器寻找视图.您可以通过覆盖 FindView 方法来做到这一点.在这种方法中，您可以检查在哪里可以找到视图.在您知道哪个设备正在使用您的网站后，您可以使用您提出的组织视图的策略来返回该设备的视图.

      I have to disagree with @Mehrdad about using a custom view engine. The view engine serves more than one purpose and one of those purposes is finding views for the controller. You do this by overriding the FindView method. In this method, you can do your checks on where to find the view. After you know which device is using your site, you can use the strategy you came up with for organizing your views to return the view for that device.

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

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

      The above code allows you set the view based on your strategy. The fall back is the desktop view, if no view was found for the device or if there isn't a default mobile view.

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

      If you decide to put the logic in your controller's instead of creating a view engine. The best approach would be to create a custom ActionFilterAttribute that you can decorate your controller's with. Then override the OnActionExecuted method to determine which device is viewing your site. You can check this blog post out on how to. The post also has some nice links to some Mix videos on this very subject.

      这篇关于我将如何根据设备类型更改 ASP.NET MVC 视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！