65.9K
CodeProject 正在变化。 阅读更多。
Home

为 ASP.NET MVC 4.0 网站实现移动友好技术 - 第二部分 - jQuery Mobile

Peter Carrasco
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.89/5 (17投票s)

2012年10月23日

CPOL

6分钟阅读

viewsIcon

63233

使用 jQuery Mobile 增强 ASP.NET MVC 应用程序的移动用户体验。

引言

本文是我之前撰写的一篇关于使 ASP.NET 网站对移动用户友好的文章的延续。 这是文章链接。在上一篇文章中，我尝试解决了移动用户界面的一些目标：

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

这里展示了示例应用程序的原始桌面版本。这是一个简单的单页 AJAX 应用程序，允许 AdventureWorks 的员工搜索和更新他们的产品库存。

Mashup

这里展示了针对移动设备的改进界面

Mashup Mobile

在本文中，我将解决移动用户界面的另外三个目标：

  • 减少内容量以加快页面加载速度。
  • 为小屏幕设备更有效地呈现导航
  • 更大的按钮和链接，方便触摸屏使用

改进的移动界面如下图所示。请注意，搜索结果只有一列而不是四列，并且搜索文本框和按钮更大，对移动设备用户更友好。此外，“编辑产品”和“交易历史”部分已最小化以减少滚动，并且配色方案更简洁。选择搜索结果中的一项将折叠搜索结果，并展开显示加载产品详细信息的“编辑产品”部分。

页脚有一个指向网站桌面版本的链接。

jQuery Mobile

背景

为了在我的移动实现中达到新的目标，我使用了 jQuery Mobile 库。我没有创建新的 Web 项目，以便可以为移动版本重用现有的控制器、模型、JavaScript 和基础结构（Entity Framework、Unity、日志记录、缓存）。尽管在界面更高级的情况下，创建单独的项目将是一个考虑因素。

jQuery Mobile 库提供了一个移动用户界面框架，该框架已在所有主流移动浏览器上进行了测试。jQuery Mobile 包含的 JavaScript 和 CSS 文件无需进行任何标记更改即可样式化许多元素以适应移动浏览器。

要集成 jQuery Mobile，请下载 jQuery Mobile 库，其中包含一个 JavaScript 文件、CSS 以及用于 CSS 的图像。您也可以使用包含 jQuery Mobile 库的 Microsoft Ajax CDN。对于这个项目，我使用了最新生产版本的 jQuery Mobile，即 1.2 版本。

使用代码

1. 在项目中引用 jQuery Mobile JavaScript 和 CSS

您可以将 jQuery Mobile 集成到您的项目中，方法有很多。由于普通 jQuery 和移动 jQuery 不能在同一个网页中一起引用，我在 Scripts 文件夹下创建了一个名为 MobileLib 的单独文件夹来存放 jQuery Mobile JS 文件。我还为 jQuery Mobile CSS 和链接的图像在 Content 文件夹下创建了一个单独的文件夹。

然后我在 Global.asax.cs 中创建了 4 个独立的 ASP.NET Bundle：

  1. 桌面 jQuery
  2. 桌面 jQuery CSS 和支持图像
  3. 移动 jQuery
  4. 移动 jQuery CSS 和支持图像
当网站处于桌面模式时加载的 _Layout.cshtml 文件会引用桌面 jQuery 和 CSS Bundle。当网站处于移动模式时加载的 _Layout.Mobile.cshtml 文件会引用移动 jQuery 和 CSS Bundle。
var cssDesktopBundle = new Bundle("~/Content/css", new CssMinify());            
cssDesktopBundle.AddDirectory("~/Content/desktop", "*.css", true);
cssDesktopBundle.AddDirectory("~/Content", "Site.css", false);
BundleTable.Bundles.Add(cssDesktopBundle);

var cssMobileBundle = new Bundle("~/Content/Mobile/css", new CssMinify());            
cssMobileBundle.AddDirectory("~/Content/mobile", "*.css", true);
cssMobileBundle.AddDirectory("~/Content", "Site.Mobile.css", false);
BundleTable.Bundles.Add(cssMobileBundle);

var jsDesktopBundle = new Bundle("~/Scripts/js");
jsDesktopBundle.AddDirectory("~/Scripts/Lib", "*.js", true);
jsDesktopBundle.AddDirectory("~/Scripts", "*.js", false);
BundleTable.Bundles.Add(jsDesktopBundle);

 
var jsMobileBundle = new Bundle("~/Scripts/Mobile/js");
jsMobileBundle.AddDirectory("~/Scripts/Lib", "*.js", true);
jsMobileBundle.AddDirectory("~/Scripts/MobileLib", "*.js", true);
jsMobileBundle.AddDirectory("~/Scripts", "*.js", false);
BundleTable.Bundles.Add(jsMobileBundle);

2. 创建独立的移动 MVC 视图

正如我在上一篇文章中提到的，ASP.NET MVC 4 将使用 <View>.Mobile.cshtml 命名约定来确定 MVC 视图是否有移动版本。

我分别在 SearchResults.Mobile.cshtml 和 Details.Mobile.cshtml 中为搜索结果和产品编辑部分创建了单独的 MVC 视图页面。这使我有自由来增强这些部分的移动版本，而不会对桌面版本产生不利影响，包括从可读性的角度来看。即使 jQuery Mobile 标记不在桌面端渲染，我也不希望额外的标记使桌面视图难以阅读。然而，这将是一个取决于所构建应用程序的设计考虑。

还有一个单独的 Index.Mobile.cshtml 用于初始屏幕布局。

3. 在 HTML 元素上应用 jQuery Mobile data* 属性

jQuery Mobile data* 属性使用熟悉的移动样式来格式化您的 HTML 元素。

由于这是一个单页 AJAX 应用程序，而不是多页应用程序，我为 jQuery Mobile 采用了单页模板，该模板在 _Layouts.Mobile.cshtml 中定义了页眉、内容和页脚部分。

<div data-role="page">
    <div data-role="header" class="ui-bar ui-bar-b">
        AdventureWorks Back Office
    </div><!-- /header -->
        
    <div data-role="content">
        @RenderBody()                
    </div>
 
    <div data-role="footer" class="ui-bar ui-bar-b">
        @Html.Partial("_ViewSwitcher")
    </div>
</div>

现在考虑移动网站搜索部分的用户界面。

jQuery Mobile 5

对于搜索文本框，我使用了一个 INPUT 元素。当 INPUT 元素的 type 为“search”时，jQuery Mobile 会在左侧显示搜索图像，在右侧显示删除图标来格式化输入文本框。对于搜索按钮，我使用了 BUTTON 元素，但 data-theme="b" 属性将按钮格式化为蓝色和椭圆形。

<div data-role="fieldcontain">            
    <input type="search" id="keyword" onkeydown="Search.keyDown(event, $(this).val());" /><br />
    <button type="submit" data-theme="b" onclick="Search.search($('#keyword').val());">Search</button>             
    <div id="searchContent"></div>
</div>

对于搜索结果列表，我使用了 jQuery Mobile 创建列表的约定，即在无序列表中使用 "listview" data-role 属性。与其他 data-* 属性一样，data-role="listview" 使大列表项更容易点击。

@foreach(AdventureWorksService.Models.ProductSearchItem item in Model.Data)
{
    <li><a href="javascript:void(0)" onclick="Search.loadProduct(@item.ProductId);">@item.Name</a></li>
}
</ul>

4. 调用 jQuery Mobile 插件以支持 AJAX 内容

jQuery Mobile 样式只能应用于已加载到浏览器 DOM 树中的元素。由于此应用程序的大多数视图都是使用 AJAX 加载的，因此有必要在代表需要样式化的 HTML 元素的 jQuery 选择器上调用 jQuery Mobile 插件。

通过 AJAX 将 HTML 内容成功加载到 DIV 后，将调用适当的 jQuery Mobile 插件。因为这个 JavaScript 也被桌面网站使用，所以我们必须检查全局对象 $.mobile 是否可用。如果可用，那么我们就知道我们处于网站的移动版本。

  1. listview 方法会将 jQuery Mobile 列表样式应用于 <UL> 元素。
  2. button 方法会将 jQuery Mobile 按钮样式应用于 <A> 元素。
  3. selectmenu 方法会将 jQuery Mobile 选择菜单样式应用于 <SELECT> 元素。
现在 HTML 元素必须具有必要 data* 属性，以便在应用插件后以您想要的方式进行格式化。例如，对于分页，我想要更小的按钮，所以我使用了 data-mini="true" 属性。
$.ajax(url, {
    type: "GET",
    dataType: "html",
    success: function (results) {
        $('#searchContent').html(results);
 
        _totalPages = parseInt($('#TotalPageCount').val());
 
        loadingPanel.hide();
        $('#searchContent').attr('data-display-mode', 'loaded');


 
        if (typeof ($.mobile) != "undefined") {
            // Apply mobile styles
            $('#searchContent ul').listview();
            $('#searchContent [data-role="button"]').button();
            $('#searchPager').selectmenu();
        }
    },
    error: function () {
        loadingPanel.hide();
        $('#searchContent').attr('data-display-mode', 'loaded');
    }
});

结论

如果您有移动设备，可以在 http://www.beachheadweb.com/adventureworks/ 查看实现。我在我的 iPhone 和 Windows Phone 模拟器上测试了该应用程序。jQuery Mobile 库已在当今市场上的绝大多数移动设备上进行了测试。 此页面突出了 jQuery Mobile 的测试结果。

感谢您的阅读，一如既往，我欢迎您对本文的实现提出任何问题和评论。

© . All rights reserved.