使用 jQuery Mobile 在 ASP.NET MVC 4 中开发移动设备专用视图 - 第二部分
4.87/5 (21投票s)
使用 jQuery Mobile 在 ASP.NET MVC 4 中开发移动设备专用视图 - 第二部分
引言
本文是系列文章“在 ASP.NET MVC 4 中使用 jQuery Mobile 开发移动设备专用视图”的第二部分，也是最后一部分，上一部分是 第一部分。本系列文章主要介绍如何在 ASP.NET MVC 4 中开发一个同时拥有移动设备专用视图和桌面视图的 Web 应用程序。针对移动设备的用户界面设计与针对桌面屏幕的设计有很大不同。我们使用 jQuery Mobile 在演示应用程序中开发移动设备专用视图。
目录
本系列文章共两部分。第一部分，点击此处。第二部分，我们将包含以下主题
- 安装 jQuery Mobile
- 为移动设备视图创建捆绑包
- 为移动设备视图设计布局
- 为移动设备设计产品页面
- 为移动设备设计按类别划分的产品页面
- 参考文献
在本文的第一部分中，我们以 ASP.NET MVC 4 的互联网模板开始，在 Visual Studio 2012 中创建了一个可用的应用程序。该应用程序显示产品信息，并且每个页面都有两种视图：桌面视图和移动设备视图。但是，我们还没有做任何事情来使移动设备视图与桌面视图有所区别。到目前为止，除了添加文本“Mobile View”之外，它们看起来和感觉都一样。
在本文中，我们将使用 jQuery Mobile 来修改移动设备视图，以在移动设备上获得更好的外观和感觉。对于本文，我们在第一部分中完成的应用程序是基础，因此请下载该解决方案的第一部分，然后按照下一节的说明安装 jQuery Mobile 进行继续。
安装 jQuery Mobile
为了开发移动设备专用视图，我们将使用 jQuery Mobile。它是一个用于开发响应式网站或 Web 应用程序的框架，适用于所有类型的智能手机、平板电脑和桌面设备。
- 点击“工具”选项卡，然后转到“库程序包管理器” > “管理解决方案的 NuGet 程序包”选项。
- 搜索 jQuery mobile，就像我们在本文第一部分搜索 51Degrees.mobi 一样，然后点击“安装”，如下图所示的按钮。
- 点击“安装”按钮后，您需要确认弹出窗口，选择要安装的应用程序，然后点击“确定”，就像我们为 51Degrees.mobi 所做的那样。它将在您的项目中安装 jQuery Mobile，您将能够看到一些新的 CSS 文件添加到 Content 文件夹，以及一些新的脚本文件添加到Scripts文件夹，如下面的屏幕截图所示。
脚本文件夹
现在 jQuery Mobile 已安装到我们的解决方案中。
安装 jQuery Mobile 的另一种方法是使用 Nuget 包管理器控制台，如第一部分关于 51Degrees.mobi 的描述，但这次您需要使用以下命令
Install-Package jQuery.Mobile
您将看到如下屏幕截图
为移动设备视图创建捆绑包
转到App_Start文件夹并打开BundleConfig.cs，在RegisterBundles 方法中，添加以下代码
bundles.Add(new ScriptBundle("~/bundles/Mobilejs").Include(
"~/Scripts/jquery.mobile-1.*",
"~/Scripts/jquery-1.*"));
bundles.Add(new StyleBundle("~/Content/Mobilecss").Include(
"~/Content/jquery.mobile.structure-1.4.0.min.css",
"~/Content/jquery.mobile-1.4.0.css"));
在这里，我们创建了两个捆绑包：一个包含 JavaScript 文件，第二个包含所有将在移动设备专用视图中使用的 CSS 文件。我们将在移动设备专用布局页面中引用这些捆绑包。
为移动设备视图设计布局
- 打开 Views > Shared 文件夹。复制现有的 _Layout.cshtml并粘贴到 Shared 文件夹中。现在将“Copy of _Layout.cshtml”重命名为“_Layout.Mobile.cshtml”。在
head标签中写入以下代码<meta charset="utf-8" /> <title>@ViewBag.Title – Mobile Application</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/Mobilecss") @Scripts.Render("~/bundles/Mobilejs") @Scripts.Render("~/bundles/modernizr")在这里，我们引用了上面部分中创建的新捆绑包。
- 在
body标签内，删除所有现有代码并写入以下代码<div data-role="page" data-theme="a"> <div data-role="header" data-position="fixed" data-theme="b"> <h1>@ViewBag.Title</h1> <div data-role="navbar" data-theme="a" data-iconpos="top"> <ul> <li><a href="@Url.Action("Index", "Home")" data-icon="home">Home</a></li> <li><a href="@Url.Action("AllProducts", "Product")" data-icon="check">Product</a></li> </ul> </div> </div> <div> @RenderSection("featured", false) @RenderBody() </div> </div>上面的代码有很多令人惊叹的地方。重点关注属性，如：data-role、data-position、data-theme 等及其值。它们是 jQuery mobile 定义的属性，用于为特定的 `div` 提供形状和行为。名称和用途密切相关，使其易于理解。您可以从 jQuery Mobile 演示此处了解更多关于这些属性的信息。
仅凭这些代码，移动设备视图的页眉就会变得对移动设备友好。您可以运行应用程序并检查移动设备视图的页眉外观。
为移动设备设计产品页面
删除AllProducts.Mobile.cshtml中现有的代码并写入以下代码
@model IEnumerable<ShopOnline.Models.Product>
@{
ViewBag.Title = "All Products";
}
<div class="ui-grid-a">
<div class="ui-block-a">
<hgroup class="title">
<h1>@ViewBag.Title</h1>
</hgroup>
</div>
<div class="ui-block-b">
<a class="ui-btn ui-btn" style="color:blue" data-role="button"
href="@Url.Action("CategoryWiseProducts", "Product")">Category wise Products</a>
</div>
</div>
@* Making collapsible set of all products using data-role*@
<div data-role="collapsible-set" data-inset="true">
@foreach (var item in Model)
{
<div data-role="collapsible">
<h3>@item.ProductName</h3>
<ul data-role="listview" data-theme="a" data-divider-theme="a" >
<li style="white-space:normal">
<h4>Detail:</h4>
<div>@item.ProductDescription</div>
</li>
</ul>
</div>
}
</div>
在这里，我们首先创建一个包含页面标题和导航到“CategoryWiseProducts.Mobile.cshtml”页面的按钮的网格。之后，我们创建了一个可折叠的产品详细信息集。其中<li style="white-space:normal">是非常关键的代码，用于使文本可换行，否则详细文本将不会根据浏览器屏幕的宽度换行。如果您想探索更多关于任何属性的信息，或者了解其他设计可能性（如果您想以其他方式设计），请访问 jQuery Mobile - 演示并查看那里提供的控件。
为移动设备设计按类别划分的产品页面
删除CategoryWiseProducts.Mobile.cshtml中现有的代码并写入以下代码
@model ShopOnline.ViewModels.ProductCategoryVM
@{
ViewBag.Title = "Category wise Products";
SelectList cat = new SelectList(Model.AllCategories, "CategoryId", "CategoryName");
}
<h2>Category wise Products</h2>
<div class="ui-field-contain">
<select name="select-custom-1" id="categorySelect" data-native-menu="false">
<option value="0">Select a Category</option>
@foreach (var item in Model.AllCategories)
{
<option value="@item.CategoryId">@item.CategoryName</option>
}
</select>
</div>
<div id="tblProductData"></div>
<script>
$("#categorySelect").change(function () {
var selectedCategory = $(this).val().trim();
var allProducts = @Html.Raw(Json.Encode(Model.AllProducts));
$('#tblProductData').empty();
var frontheaders = '<div data-role="collapsible-set" data-inset="true">';
var backheaders = '</div>';
var elements = '';
for (var i = 0; i < allProducts.length; i++) {
if(allProducts[i].ProductCategory.CategoryId == selectedCategory)
elements = elements + '<div data-role="collapsible"> <h3>' +
allProducts[i].ProductName + '</h3> <ul data-role="listview"
data-theme="a" data-divider-theme="a"> <li style="white-space:normal">
<h4>Detail:</h4> <div>' +
allProducts[i].ProductDescription + '</div> </li> </ul> </div>';
}
if (elements != '')
{ var data = frontheaders + elements + backheaders
$('#tblProductData').append(data).trigger('create');
}
});
</script>
在这里，我们首先创建一个包含所有类别的下拉框。在选择一个类别后，我们使用 JavaScript 将产品数据添加到所选类别下的tblProductData div中。
现在我们已经完成了代码修改。运行应用程序，使用用户代理切换器检查移动设备视图。您应该能够看到如下所示的视图
移动设备专用“所有产品”页面
移动设备专用“按类别划分的产品”页面
结论
在本系列文章中，我们学习了为什么需要为移动设备创建单独的视图，以及如何在 ASP.NET MVC 4 中结合使用 51Degrees.mobi 和 jQuery Mobile。希望您喜欢这个代码演练以及这段通往移动 Web 应用程序开发新世界的小旅程。欢迎您就此提出疑问和评论。谢谢。