您的位置：首页 > 编程语言 > ASP

[翻译]ASP.NET MVC 3 开发的20个秘诀（十六）[20 Recipes for Programming MVC 3]：站点移动化

2011-12-22 09:42 501 查看

议题

通常情况下，你的网站可能在大多数移动设备上都无法正常显示。当然大多数情况下是设备不够好，但是你也应该不会希望为适应手机浏览而发费很高的代价做一个全新的站点。

解决方案

使用Jquery Mobile NuGet package，为传统浏览器和大多数移动手机建立备选的共享布局和视图。

讨论

首先，假如你阅读过MVC4的技术路线图，你会发现在下一版本增加了许多关于移动化的支持，特别是接下来这个示例中包含的关于JQuery移动支持的内容。不幸的是，现在就开始期盼MVC4还为时尚早，而其中很多事情也只是表示“可能”实现。因此，为了不使等待落空，我会提供了一个简单的解决方案，将工作控制在最小的范围，创建支持移动和普通情况的Web应用程序。此外，Windows 8很快就回来了，它会支持HTML 5的桌面Web应用程序，它也会成为一个桌面应用程序。

开始，需要从NuGet管理器中添加Jquery Mobile package。在MVC3版本中，JQuery的默认版本是1.5.x，而JQuery Mobile默认是需要1.6.x以上版本支持，所以我们需要通过NuGet package管理器来更新JQuery。

在MVC应用程序项目中，点击菜单“工具”→“Library Package Manager”→“Add Library Package Reference”。选择添加“JQuery Mobile Package”前要对已安装的JQuery 进行更新。在升级JQuery基本包之前必须先升级其他子包。

在完成所有包的升级之后，点击左侧Online按钮，在右上角搜索栏输入“Jquery.mobile”并点击“Install”。所有JQuery附加的CSS和Javascript必须项都会被安装到项目中。

JQuery的移动插件是基于HTML5语法实现的。使用这个语法，CSS和Javascript实现的外观与大多数的智能手机内置程序相匹配。

这个示例的目标是使用这个新库在保持原有web版本不变的情况下，创建一个友好的移动版本站点。首先，我们需修改Shared/_Layout视图，让其支持JQuery Mobile。

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content(
"~/Content/jquery.mobile-1.0b1.min.css")"
rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if (window.innerWidth > 480) {
$("link[rel=stylesheet]").attr({ href:
"@Url.Content("~/Content/Site.css")" });
}
});
</script>
<script src="@Url.Content(
"~/Scripts/jquery.mobile-1.0b1.min.js")"
type="text/javascript"></script>
@RenderSection("JavaScriptAndCSS", required: false)
</head>
<body>
<div class="page" data-role="page">
<div id="header" data-role="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay" class="ui-bar">
@Html.Partial("_LogOnPartial")
[ @Html.ActionLink("English", "ChangeLanguage",
"Home", new { language = "en" }, null) ]
[ @Html.ActionLink("Français", "ChangeLanguage",
"Home", new { language = "fr" }, null) ]
</div>
<div id="menucontainer" class="ui-bar">
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home",
null, new Dictionary<string, object>
{{ "data-role", "button" }})</li>
<li>@Html.ActionLink("About", "About", "Home",
null, new Dictionary<string, object>
{{ "data-role", "button" }})</li>
</ul>
</div>
</div>
<div id="main" data-role="content">
@RenderBody()
</div>
<div id="footer" data-role="footer">
</div>
</div>
</body>
</html>

这与之前的例子十分相似，这个是基于HTML的共享视图项目模版，为了让它支持JQuery Mobile功能，我们做了以下几件事情：

链接JQuery Moblie CSS文件；

嵌入 Jquery Mobile Javascript文件；

在已存在的<div>标记，包含page、header、content和footer节点以及几个菜单标记中添加“data-role”属性；

在Javscript中添加浏览器检测，当浏览器尺寸大于480像素时，启用默认CSS。

接着将程序运行两次（一次是全屏模式，一次是将浏览器缩放至480像素以内），你将会看到两个不同的站点（如图1-6和1-7）。

正如你所看到的，虽然还有很多工作要做，但是一切看起来都非常好了，将“data-role”属性添加到默认布局上，基本上已经完成了90%的工作。JQuery Mobile已经提供了智能手机所需的基本功能，接下来，就需要对特定功能或元素进行实现了。

导航栏（在页首或页脚，有图标或没图标）

页面转换

对话框

图示 1-6 默认MVC模版

按钮

表单

列表视图（提供移动平台手指滚动支持）

全尺寸主题外观和手感支持

图例 1-7 默认移动模版

导航栏实例：

<div id="logindisplay" class="ui-bar">
@Html.Partial("_LogOnPartial")
@Html.ActionLink("English", "ChangeLanguage", "Home",
new { language = "en" }, null) ]
@Html.ActionLink("Français", "ChangeLanguage", "Home",
new { language = "fr" }, null) ]
</div>

下面这个例子，将会呈现典型的智能手机按钮外观，其他的链接也具有相同的风格。

页面切换示例：

@Html.ActionLink("My Cool Link", "SomeAction", "Home", null,
new Dictionary<string, object>
{{ "data-transition", "slide" }})

下面这个页面点击链接将通过Ajax加载新内容切换页面。在标准网站上，目前所有链接都能完成这个工作。

对话框示例：

@Html.ActionLink("My Cool Link", "SomeAction", "Home", null,
new Dictionary<string, object>
{{ "data-rel", "dialog" }})

就像前面的示例子，这将会生成一个标准的Web浏览器链接，但是在移动版本中，将会弹出显示对话框。

按钮示例：

<div data-role="page">
<div data-role="header">
@Html.ActionLink("Cancel", "SomeAction", "Home", null,
new Dictionary<string, object>
{{ "data-icon", "delete" }})
<h1>Page Title</h1>
@Html.ActionLink("Save", "SomeAction", "Home", null,
new Dictionary<string, object>
{{ "data-icon", "check" }})
</div>

</div>

正如你想的那样，这些按钮被放置在顶栏中，左右两侧各一个，就像当前大多数只能手机的标准顶部按钮一样。

表单表项示例：

<div class="editor-label">
@Html.LabelFor(model => model.ShortName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ShortName)
@Html.ValidationMessageFor(model => model.ShortName)

</div>

这里没有必须改动的地方。大多数内建表单功能使用JQuery Mobile都可以如期实现。

列表视图示例：

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Books</li>
@foreach (var item in Model)
{
<li>@Html.ActionLink(
item.Title, "Details", new { id = item.ID })
</li>
}
</ul>

上面这个例子，列出了所有的书籍，作为一个标准滚动列表，点击书籍标题链接跳转到详细页面。

改变主题示例：当前，JQuery Mobile内置5个主题，字母从a到e，可以通过添加“data-theme”属性，通过不同的字母（从a到e）来切换不同的主题。

参考

JQuery Mobile 原书地址书籍源代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航