面向移动设备的 ASP.NET MVC 4.0 网站技术

引言

本文将向您展示 ASP.NET MVC 4.0 的基本移动功能。我们将通过 CSS 和 ASP.NET 对现有网站进行以下更改，以使其在移动设备上对用户更加友好：

• 内容适应小屏幕
• 单向滚动（水平或垂直，但不能同时）
• 简洁高效的设计
• 提供访问桌面网站的选项

本文不会尝试为移动设备创建全新的用户界面。在许多情况下，如果您有一个复杂的 Web 应用程序，创建具有不同 UI 流程的完全不同的用户界面会更有意义。但是，如果您有一个简单的 Web 应用程序，只需进行一些小的改动，就可以在不完全重写 UI 的情况下，在用户体验方面为移动设备上的用户带来巨大的改善。

本文将使用的应用程序是一个简单的 ASP.NET MVC 4.0 AJAX Web 应用程序，允许后端用户维护虚构的 AdventureWork 库存。用户界面内容包含在三个 HTML DIV 中。在桌面设备上，屏幕上有足够的空间以宽屏格式渲染它们，甚至可以将它们横向并排放置。

然而，在移动设备上，默认屏幕宽度要小得多。为了使应用程序适合移动设备，我们希望移动用户能够在设备的默认配置下使用该应用程序，即内容缩放且屏幕宽度为“纵向”。当然，智能手机用户可以缩小并更改方向为“横向”，但我们希望他们避免这些手动步骤。

理想情况下，应用程序应如下所示，这样内容可以完全适应纵向屏幕宽度，无需向右滚动，并且内容是清晰可读的，无需缩放。

必备组件

本文假定您对 ASP.NET MVC 有基本了解，但不一定熟悉 4.0 版本。要使用示例代码，您需要 Visual Studio 2010 或 2012。

您还需要一个移动浏览器模拟器。本文我使用了 Windows Phone 模拟器。您也可以通过更改浏览器发送到服务器的用户代理字符串来配置浏览器以模拟移动设备。

使用代码

示例代码位于 CodePlex 的 AdventureWorksPortal 页面。

1. 为移动设备使用 ViewPort 元标记

网站在移动设备上的初始外观如下。由于应用程序的内容超出了设备的宽度，因此应用程序将自动缩小。

大多数移动浏览器定义了一个虚拟浏览器窗口宽度——称为视口——远大于移动设备的实际宽度。这允许移动浏览器将整个网页适应到虚拟显示屏中。然后用户可以放大特定信息。但是，如果将视口宽度设置为实际设备宽度，则无需缩放，因为内容可以适应移动浏览器。

ASP.NET MVC 4 布局文件（/Views/Shared/_Layout.cshtml）中的视口 <meta> 标记将视口设置为设备宽度。以下行显示了 ASP.NET MVC 4 布局文件中的视口 <meta> 标记。

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

Visual Studio 中的 ASP.NET MVC 4.0 Internet 项目默认会在布局文件中包含此行。请注意，最终版本的代码不包含此行在 _Layout.cshtml 中，我们将在后续步骤中为移动设备创建该文件的另一个版本。

在视口元标记的作用下，网站显示如下。

情况有所改善。至少现在初始显示的内容是清晰可读的，无需缩放。然而，内容 DIV 并不适合屏幕宽度，并且 DIV 中的网格超出了边界。

2. 为小屏幕尺寸使用 CSS 媒体查询

CSS 媒体查询是 CSS 的扩展，用于不同的媒体类型。它们允许您创建规则，覆盖特定浏览器的默认 CSS 规则。针对移动浏览器的常见 CSS 规则是定义最大屏幕尺寸。创建新的 ASP.NET MVC 4 Internet 项目时创建的 Content\Site.css 文件包含以下媒体查询：

@media only screen and (max-width: 850px) { 

如果浏览器窗口宽度为 850 像素或更小，此媒体块内的 CSS 规则将覆盖主默认部分中定义的规则。您可以像这样使用 CSS 媒体查询，为小屏幕浏览器（如移动浏览器）提供比为桌面浏览器较宽显示设计的默认 CSS 规则更好的 HTML 内容显示。

在此部分中，我覆盖了主 CSS 部分中定义的一些样式。通过此部分中定义的覆盖，三个 DIV 将一个接一个地放置，这样用户只需垂直滚动，这比在移动设备上水平滚动更自然、更易于使用。我还将徽标、页脚和内容 DIV 的左边距从 20 像素更改为 5 像素，以适应较小的设备宽度。

footer 
{
    clear: both;
    font-size: .8em;
    height: 100px;
    margin-left: 5px;
}

div.content
{
    margin: 20px 20px 20px 5px;
}   

/* LOGO */
.logo
{
    margin: 20px 20px 20px 5px;
    font-family: Verdana;
    font-size: 24px;
    font-weight: bold;
    color: #839fa7;
    width: 100%; 
}

/* Specific DIVs */
#search
{
    float: left;
    width: 95%;
    overflow-x: scroll;
}
    
#productEdit
{
    float: left;
    clear: both;  
    width: 95%;  
    overflow-x: scroll; 
}

#transactionHistory
{
    float: left;
    clear: both;
    width: 95%;  
    overflow-x: scroll;      
}

如果 DIV 中的任何内容超出了 DIV 的宽度，内容将水平滚动。这对编辑和交易历史记录 DIV 不是必需的，但对搜索结果网格来说则非常必要。

通过 CSS 中针对移动设备的覆盖，移动界面开始成型。

3. 为移动设备覆盖视图

我想对移动设备的用户界面进行一些更改：

1. 在视图中添加链接并重新排列标题
2. 允许用户从移动设备切换到桌面模式。

ASP.NET MVC 4 中的一个重要新功能是一个简单的机制，允许您为移动浏览器覆盖任何视图（包括布局和部分视图）。要提供特定于移动设备的视图，我复制了 _Layout.cshtml 文件，并在文件名中添加了 .Mobile。移动设备的新布局文件变为 Views/Shared/_Layout.Mobile.cshtml。当服务器识别出用户是移动客户端时，MVC 在搜索视图时将使用 <View>.Mobile.cshtml 而不是默认的 <View>.cshtml 文件。

首先，我从默认的 _layout 文件 Views/Shared/_Layout.cshtml 中删除了以下行，并将其添加到移动版本的文件中的相同位置。这样，如果移动用户想以桌面模式查看网站，服务器将使用默认的 Layout.cshtml，并且移动设备上的内容将处于扩展、缩放的桌面模式。

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

然后在移动文件中，我让标题跨越 2 行，并添加了一个 HTML 帮助程序链接到 _ViewSwitcher 视图。

<div>
    <div class="header">
        <span class="logo">AdventureWorks</span>
        <span class="logo">Back Office</span>
    </div>
    <section>
        @RenderBody()
    </section>
    <footer>
        @Html.Partial("_ViewSwitcher")
    </footer>
</div>    

现在标题看起来更简洁了，并且用户可以选择以桌面模式打开网站。

我还将页脚标记添加到了布局文件的桌面版本中。这样，当移动用户处于桌面模式时，他们可以切换回移动模式。

4. 在移动视图和桌面视图之间切换

最后，我们将介绍如何允许移动用户在移动和桌面视图之间切换。为了在移动模式和桌面模式之间进行切换，我们必须使用服务器端 ASP.NET MVC 代码更改服务器上用户 HTTP 上下文的浏览器属性。当移动用户切换到桌面模式时，我们将通过更改该用户的浏览器用户代理属性来“欺骗”服务器，使其认为用户是桌面客户端。

布局文件的移动版本公开了一个链接到 MVC 视图 _ViewSwitcher.cshtml。此视图将公开以移动模式或桌面模式重新打开网站的链接。

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

包含链接代码的控制器是 ViewSwitcherController.cs。使用 BrowserHelpers 类，我可以更改服务器用于确定客户端是移动设备还是桌面设备的浏览器用户代理。如果移动用户请求桌面视图，我会将用户代理覆盖为桌面模式，然后重定向到主页。重定向后，移动用户将看到以桌面模式显示的网站。如果移动用户请求返回到移动视图，我将清除覆盖的浏览器值并重定向到主页。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.WebPages;
 
namespace AdventureWorksWeb.Controllers
{
    public class ViewSwitcherController : Controller
    {
        public RedirectResult SwitchView(bool mobile, string returnUrl)
        {
            // If the mobile user has requested to view the mobile view
            // remove any overridden user agent for the current request
            if (Request.Browser.IsMobileDevice == mobile)
                HttpContext.ClearOverriddenBrowser();
            else
                // Otherwise override the browser setting to desktop mode
                HttpContext.SetOverriddenBrowser(mobile ? 
                        BrowserOverride.Mobile : BrowserOverride.Desktop);
 
            return Redirect(returnUrl);
        }
    }
} 

后续步骤

移动设备检测

当然，ASP.NET 代码的质量取决于它检测客户端是否为移动设备的能力。对于较新的浏览器，ASP.NET 无法检测到它们是移动设备。 51Degrees.mobi 是 CodePlex 上一个开源类库，ASP.NET 开发人员可以使用它来增强移动设备检测能力。如果您想深入研究，请下载该库并将其用于您的 Web 应用程序以改进移动设备检测。

改进可用性

这是一个很好的第一步。然而，该网站还可以使用大尺寸、适合移动设备的按钮，这些按钮在移动设备上更容易使用，并且搜索栏也需要一些改进。 ASP.NET 开发团队的 jQuery MVC 项目开发了一个 NuGet 包，为您的网站添加了 jQuery 移动支持。jQuery 移动包括适合移动设备的按钮和搜索栏。

该项目的源代码位于 http://adventureworksportal.codeplex.com。

感谢您的阅读，如果您对本文内容或示例源代码有任何疑问，请随时与我联系。