领先技术：在ASP.NET MVC 4中创建为移动设备优化的视图

领先技术：在ASP.NET MVC 4中创建为移动设备优化的视图2014-06-04 MSDN Dino Esposito如果深入探讨有关编写移动设备网站的常识性考虑因素，会发现其中有一种内在矛盾。一方面，客户在其编写应用程序和网站的方法中强烈要求（或乐于要求）移动优先。另一方面，同一些人又经常称赞 CSS 媒体查询和流体布局。我所发现的矛盾在于经常利用 CSS 媒体查询和流体布局并未在其他内容之前优先处理移动方面，它不是一种移动优先的方法。在本文中，我将介绍如何使用服务器端逻辑为给定设备呈现最佳的显示效果，并介绍 ASP.NET MVC 4 的一种新功能，称为显示模式。

问题不在于 CSS 媒体查询作为一种技术。问题甚至也不在于自适应 Web 设计（RWD）作为 CSS 媒体查询的支持方法 — 虽然不是这项技术启发性的宗旨所在。那么，怎样将使用 CSS 媒体查询和流体布局变为一种 “移动优先”的方法？在用于推广此方法的口号中即可发现端倪：一个基本代码可为多个视图服务。在这个角度上，使用 CSS（一种客户端技术）在视图之间切换，而使用 JavaScript 在 CSS 无法胜任时进一步调整视图。

在我看来，此方法中的基本做法是为所有设备提供相同内容，只调整页面布局以适合屏幕大小。因此，可能无法向用户提供最佳的体验。我认为，您应在合理的情况下力求仅有一个基本代码（Web API 的共同基础），但一定要重点关注要支持的每类设备的具体使用情况。“移动”一词如今已变得意义狭窄，被智能手机、平板电脑、笔记本电脑和智能电视等多种类型的设备取代，更不用说眼镜显示器和智能手表等可穿戴设备。

大约一年前，我在这个专栏中展示了一种在开发 ASP.NET MVC 网站时采用的服务器端方法：用于为所支持的每类设备创建临时视图（“移动站点开发：标记”msdn.microsoft.com/magazine/jj133814）。我当时在 ASP.NET MVC 3 的环境中这样做。ASP.NET MVC 4 完全胜任这项任务，它具有前面提到的显示模式，可使用它轻松实现为给定设备提供最佳视图和内容的服务器端逻辑。为了切实有效，此方法要求您尽可能多地了解请求设备的功能。但是，除了有关屏幕大小和当前方向的基本信息外，在客户端上检测不到其他内容。然后，需要采用设备信息的服务器存储库。

在 ASP.NET MVC 4 中引入显示模式

在我开始深入探讨显示模式之前，请让我事先声明，这篇文章（以及显示模式技术本身）主要涉及生成一个独一无二的新站点，其中将同一 URL 动态绑定到不同的视图。如果您已有网站，要提供一个为某些（移动）设备优化的附属网站，那完全是另一个话题。您仍可将本专栏作为生成附属网站的指南，但与现有父网站统一 URL 需要使用其他工具。

在 ASP.NET MVC 4 中，显示模式是一项系统功能，该功能扩展视图引擎的传统行为，使后者可选取最适合请求设备的视图文件。在前面提到的 ASP.NET MVC 3 文章中，我为此使用了自定义视图引擎。在该解决方案中，我还只能使用 Razor 视图。通过显示模式，控制器方法仍将调用，比如说，一个名为 Index 的视图，如果已知请求设备为某种移动设备，则 ASP.NET MVC 运行时将改为选取一个名为 index.mobile.cshtml 的视图文件。

这是一个大好消息，因为这表示网站仍可只有一个基本代码。只需为要支持的每类设备添加额外的 CSHTML 视图文件。为了开始使用显示模式，我们来看图 1 中的代码示例。

图 1：支持的显示模式的标准列表

<h2>Display Modes currently active（@DisplayModeProvider.Instance.Modes.Count mode（s））</h2><ul>@{foreach（var d in DisplayModeProvider.Instance.Modes）{<li>@（String.IsNullOrEmpty（d.DisplayModeId）？"default" :d.DisplayModeId）</li>}}</ul>

图 1 中代码中的页面显示支持的显示模式的标准列表。图 2 显示由该页面生成的输出。

图 2：显示模式的默认列表