ASP.NET MVC 4

  • 项目

ASP.NET MVC 4 中移动开发的新功能

Keith Burnell

 

长时间以来，开发人员一直在寻找一种神奇的工具让单个代码库能够支持所有平台。如今，这样的工具要比以往任何时候都更加重要。 随着移动智能电话和平板电脑在全球范围内日益普及并不断推陈出新，您的站点必须提供一个既美观又实用的移动界面。 您完全可以走本机应用程序路线并为 iOS、Android、Windows Phone、BlackBerry 等平台创建特定的应用程序，但遗憾的是，本机应用程序需要特定于平台的技能和代码。

幸运的是，HTML5 与 CSS3 这一工具集最终将帮助您真正做到“一次编写，随处运行”。尽管 HTML5 和 CSS3 目前还未形成完备的规范，但它们正迅速成为基于浏览器的多重目标站点的行业标准，其大多数功能已获得主流浏览器的支持。 HTML5/CSS3 组合的优势在于，它只是简单直接的 HTML 标记，可以在任何基于 HTML 的工具集（从 PHP 到 ASP.NET MVC）中使用。

本文将深入介绍 ASP.NET MVC 4 的新功能，其中的很多功能利用 HTML5 和 CSS3 提供的与浏览器相关的功能，使您能够更轻松地开发专门针对移动浏览器的站点以及同时针对移动和桌面浏览器的站点。

如果您尚未安装 ASP.NET MVC 4 并正在运行 Visual Studio 2010，您可以从 Web 平台安装程序或直接从 ASP.NET MVC 网站 (asp.net/mvc/mvc4) 下载内部测试版。 Visual Studio 11 包含 ASP.NET MVC 4。

自适应呈现

自适应呈现是指根据目标设备和浏览器的功能以不同方式显示网站的过程。 ASP.NET MVC 4 提供了许多自适应呈现技术。

Viewport Meta 标记默认情况下，浏览器（甚至是移动设备和平板电脑上的浏览器）假设它们在桌面上呈现页面，并以 980 像素的宽度显示缩小的内容。 图 1 显示了一个使用 ASP.NET MVC 3 中的默认 Internet 站点模板创建的站点。请注意，尽管该站点在移动浏览器中显示，但此浏览器仍假设它针对桌面呈现内容。 虽然以此方式呈现的站点仍可用，但效果肯定不理想。

The Default Display Created Using ASP.NET MVC 3
图 1 使用 ASP.NET MVC 3 创建的默认显示

您可以改为使用 viewport meta 标记向浏览器明确指示为呈现内容设置的宽度、高度和比例。 您也可以将 viewport meta 标记配置为根据设备的功能进行呈现：

<meta name="viewport" content="width=device-width" />

图 2 显示了将 viewport meta 标记添加到 _Layout.cshtml 后呈现的页面。 此站点现已扩展至设备的宽度。 如果您使用任何项目模板（Web API 除外）创建一个新的 ASP.NET MVC 4 项目，您可以打开 _Layout.cshtml 文件，随即便会在 head 部分中看到 viewport meta 标记。 

Scaling to the Device with ASP.NET MVC 4
图 2 使用 ASP.NET MVC 4 扩展至设备的宽度

CSS 媒体查询当您开发多重目标站点时，您通常希望移动用户看到一个不同于桌面用户所看到的视图。 通常情况下，这两种视图的功能几乎相同，但内容的样式和显示效果却并不相同。 利用 CSS 媒体查询，您可以根据向您网站发出请求的浏览器的功能有条件地应用特定 CSS 样式：

@media only screen and (max-width: 850px) {
    header{
      float: none;
    }
  }

仅当媒体为屏幕媒体而非印刷媒体，且站点呈现区域的最大宽度小于 850 像素时，此媒体查询才会应用包含的样式。 此项技术使您能够根据浏览器的呈现功能以任何可以想到的方式更改内容的样式。

在处理移动浏览器的请求时，您通常必须考虑带宽。 通常情况下，当您使用移动设备时，您并未连接至 Wi-Fi 或其他高速网络，因此当您向这些设备提供站点时，您需要以尽可能最有效的方式提供。 例如，如果您的站点功能不必使用图像，则不要在移动视图中包含图像。 如果您确实需要图像，请确保提供正确大小的图像 — 即，确保实际发送的图像大小与要显示的尺寸相符。 正如您可以使用 CSS 指定图像一样，利用 CSS 媒体查询，您可以根据设备和浏览器的功能指定不同的图像。

所有默认 ASP.NET MVC 4 项目模板（Web API 模板除外）都包含一些 CSS 媒体查询示例。 为了说明这一点，请使用 Internet 应用程序项目模板创建并运行一个新的 ASP.NET MVC 4 项目。 将您的浏览器最大化，然后慢慢地开始缩小窗口大小。 当窗口大小达到 850 像素或更小时，您会注意到默认页面的显示效果有很多变化。 要了解有关确切变化的详细信息，请从 Site.css 文件的第 466 行开始查看。

当仅使用 CSS 无法实现目标时

有时，修改样式并不足以让您的站点在所有设备上呈现并且可用。 这种情况下，唯一有效的方法是创建适用于要支持的浏览器类型和设备的视图。

提供特定于移动设备的视图根据发出请求的浏览器提供特定页面的想法算不上新颖。 长期以来，开发人员一直在进行浏览器探查方面的开发。 在 ASP.NET MVC 的早期版本中，您可以创建一个继承自 Web 窗体或 Razor 视图引擎的自定义视图引擎实现、覆盖 FindView 方法、添加一些浏览器探查，以及返回特定于用户浏览器的视图。 ASP.NET MVC 4 中有两个新功能可帮助您以不同的级别实现此目的，并可显著减少工作量。

利用 ASP.NET MVC 4 中的新功能，您可以使用约定而非配置全局覆盖移动设备的视图。 当 ASP.NET MVC 4 为移动浏览器发出的请求提供服务并确定要提供的视图时，它首先将使用 [view].mobile.cshtml 的命名约定查找视图。 如果找到与此命名约定匹配的视图，ASP.NET MVC 将提供该视图；否则，将恢复标准视图。

正如您在图 3 中看到的，我复制了 _Layout.cshtml，并按照此约定将其重命名为 _Layout.mobile.cshtml。 我突出显示了 HTML 中的一行代码，添加此行是为了明确表明用于呈现页面的 _Layout.cshtml。 在桌面浏览器中呈现此站点时，未出现任何变化；但当我在移动浏览器中呈现此站点时，您会看到使用了 _Layout.cshtml 的移动版本，如图 4 所示。

Mobile-Specific _Layout.cshtml
图 3 特定于移动设备的 _Layout.cshtml

Mobile-Specific View
图 4 特定于移动设备的视图

提供特定于浏览器的视图 大多数情况下，不必再在桌面上提供特定于浏览器的视图或内容。 但如果您曾经开发过网站（时间多久都没关系），那么您很可能编写过代码或 CSS 以便让某项功能在一个特定浏览器或另一个浏览器中正常工作。 这正是我们现在介绍的与移动浏览器有关的问题，但由于移动平台数量较大，每个平台都有自身的浏览器，因此该问题比较复杂。 仅仅解决此问题似乎还不够，我们现在将了解“本机”站点这一概念。 仅仅让您的站点在移动浏览器上呈现良好的外观还不够；要真正做到完美，站点应具备在设备上本机运行的应用程序的外观。 这不仅需要为通常的移动浏览器提供特定的视图，还要为样式与平台相匹配的特定移动浏览器提供特定视图。

为了实现此目标，ASP.NET MVC 4 引入了显示模式。 此全新功能使您能够将“约定优先于配置”方法的易用性与使用浏览器探查提供特定于浏览器的视图的可靠性结合在一起。

要利用显示模式，您必须先在 Global.asax 的 Application_Start 方法中定义它们，如下所示： 

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
  ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

这是为 iPhone 浏览器创建的显示模式。 “iPhone”的第一个实例定义了 ASP.NET MVC 在确定要呈现的视图时将要查找的视图后缀。 “iPhone”的第二个实例引用发出请求的用户代理，并定义了 ASP.NET MVC 将用于匹配命名约定 [view].iPhone.cshtml 的条件。 您可以将这句话的本质理解为： 当 iPhone 浏览器发出请求时，首先查找与后缀“iPhone”匹配的视图。

为了演示 iPhone 浏览器显示模式，我再次复制了 _Layout.cshtml，并根据我在创建显示模式时定义的命名约定将其命名为 _Layout.iPhone.cshtml。 然后，我对它进行了修改，以明确指示当我使用 iPhone 浏览站点时将使用 iPhone 布局。 如果我在桌面浏览器或 Windows Phone 仿真器浏览器中查看此站点，我将看不到所作的修改，但当我在 iPhone 浏览器中显示此站点（如图 5 所示）时，我可以看到修改。

iPhone-Specific View
图 5 特定于 iPhone 的视图

ASP.NET MVC 4 新增的这些功能使您可以轻松提供特定于移动设备和浏览器的视图，而不必进行探查或只需很少的探查。 利用 ASP.NET MVC 4 中的视图覆盖和显示模式，您可以提供特定于移动设备和浏览器的视图，从而有机会使您的站点完全符合其呈现设备的需要。

jQuery Mobile 和 jQuery.Mobile.MVC

jQuery Mobile 是一个开放源代码库，用于为基于 jQuery Core 的移动设备构建用户界面。 由于 jQuery Mobile 是一个记录完整的工具集，并且由于在 ASP.NET MVC 4 中实现 jQuery Mobile 与在任何其他语言或框架中实现并无差别，因此我在本文中将不介绍具体的实现方法，而只是说明如何将其集成到 ASP.NET MVC 4 中。

默认情况下，jQuery Mobile 并未包含在 ASP.NET MVC 4 项目模板（移动应用程序项目模板除外）中，但将其添加到 ASP.NET MVC 4 应用程序中并不困难。 您应使用 NuGet 安装脚本和其他必要的文件，然后进入 _Layout.cshtml 并手动添加所需的脚本和 CSS 引用。 或者，您也可以安装 jQuery.Mobile.MVC NuGet 程序包，该程序包将安装所有脚本和其他必要的文件；创建一个 _Layout.Mobile.cshtml，然后添加对所有 jQuery Mobile 脚本和 CSS 文件的引用。 jQuery.Mobile.MVC NuGet 程序包还会添加视图切换功能，使查看站点的移动版本的用户能够切换到完整的桌面视图，如图 6 所示。

jQuery Mobile View with View-Switching Functionality
图 6 带有视图切换功能的 jQuery Mobile 视图

项目模板

如果要创建专用于移动浏览器的独立站点，可以使用 ASP.NET MVC 4 创建的项目模板实现此目的。 创建新的 ASP.NET MVC 4 项目时，您现在可以选择“移动应用程序”项目模板。 

使用 ASP.NET MVC 4 移动应用程序项目模板创建项目，然后查看整个项目结构。 您会看到，与标准 ASP.NET MVC 4 应用程序项目模板相比，未出现任何明显的变化 — 您仍拥有相同的模型、视图和控制器。 但当您运行应用程序时，您会看到此站点专门针对移动浏览器进行了调整。

正如我在前面简要介绍的，ASP.NET MVC 4 移动项目模板包含现成的 jQuery Mobile。 此外，它还在所有默认视图中实现了 jQuery Mobile：

<h2>@ViewBag.Message</h2>
<p>
  To learn more about ASP.NET MVC visit <a href="https://asp.net/mvc"
    title="ASP.NET MVC Website">https://asp.net/mvc</a>.
</p>
<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Navigation</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

此代码源自 Views/Home/Index.cshtml。 如果您不熟悉 jQuery Mobile 及其实现方法，那么您最初可能注意到的属性便是“data-”（“数据破折号”）属性。 jQuery Mobile 使用这些属性配置页面上的控件。

如果您要创建一个仅适用于移动浏览器的站点，ASP.NET MVC 4 移动应用程序项目模板将非常适合；或者，如果您要实现特定于移动浏览器的功能，可以参考此模板。 大多数情况下，您可能要创建一个实际上针对桌面浏览器的站点。 与此同时，您还希望站点以可用的方式在移动浏览器上呈现，而不必额外花费大量的时间和精力来进行特定于移动设备的代码修改。 幸运的是，这种情况下可以使用 ASP.NET MVC 4 移动应用程序项目模板，并以此模板为基础将特定于移动设备的功能引入到现有的基于桌面浏览器的 MVC 应用程序中。

由于移动设备日益普及，因此 ASP.NET MVC 4 如此重视移动网站开发体验的改进就显得不足为奇了。利用 ASP.NET MVC 4 中的新功能可确保站点不但满足其所有用户的需求，而且无需在用户界面层中进行大范围的编码和复制即可实现此目的。

Keith Burnell 是 Skyline Technologies 的高级软件工程师。 他从事软件开发工作已经 10 多年了，并专门从事大规模的 ASP.NET 和 ASP.NET MVC 网站开发。 Burnell 积极参与开发人员社区，您可以访问 dotnetdevdude.com 查看他的博客，或访问 twitter.com/keburnell 查看他的微博。

衷心感谢以下技术专家对本文进行审阅：John Ptacek 和 Clark Sell