ASP.NET MVC 4和jQuery Mobile开发可切换的桌面和移动站_H5之家

旁白：你们通常是怎样处理枚举的？我看到它有几种方法。我希望它变得更通用。下面是我做的评级编辑器模板。注意到nullable了吗？这用于创建和删除工作

@model MyApp.Models.Rating? @using MyApp.Models <select id="@ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="@ViewData.TemplateInfo.GetFullHtmlFieldName("")"> @foreach (int rating in Enum.GetValues(typeof(Rating))) { var name = Enum.GetName(typeof(Rating), rating); <option value="@name" selected="@(Model.HasValue ? (int)Model == rating : false)">@name</option> } </select>

这是一个基本的桌面 CRUD 应用。

使其移动化
如前所述，您可能已注意到，当你创建一个 ASP.NET MVC 应用程序的时候，您可以选择具有 jQuery 标准的"桌面"互联网应用程序的移动模板。但是，没有可切换式的模板。也就是说，一个适用于桌面的常规模板，却要切换到适用于移动设备的 jQuery Mobile模板（或 KendoUI，或任何你乐于使用的模板) 。

使用 NuGet，安装 jQuery.Mobile.MVC 软件包。您可以右击References（引用），选择Manage NuGet Packages（管理NuGet 软件包），您还可以使用软件包管理器控制台输入：

install-package jQuery.Mobile.MVC
此软件包会自动带来jQuery Mobile以及：
•ViewSwitcher 的局部视图和辅助控制器,它促使我们手动切换桌面和移动
•一个基本的 _Layout.Mobile.cshtml ，支持样式表
•使用 ASP.NET 优化的（CSS 和 JS 捆绑程序) BundleMobileConfig.cs
注：JQuery Mobile的 ViewSwitcher 和这里的其他技术相比，没有什么特别的。令人高兴的是，您可以为任何其他流行的移动框架更改此程序包。

首先，我们在 Global.asax 中添加新的捆绑包：

BundleConfig.RegisterBundles(BundleTable.Bundles); BundleMobileConfig.RegisterBundles(BundleTable.Bundles); // <-- ADD THIS ONE

由于我安装了Electric Plum iPhone 模拟器，我就会从我的 Visual Studio 中的浏览器下拉列表中选择它，运行我的应用程序，然后导向/DVD。

在系统看来，我在移动设备上，它使用 _Layout.mobile.cshtml，而不是使用 _Layout.cshtml。

这并不真的好看。首先，我不喜欢默认样式。只需进入 _Layout.Mobile.cshtml，并将数据主题属性更改为任何值。我将主题a该为主题b。

然后，虽然我使用的是 _Layout.Mobile.cshtml，但我仍在使用当显示在移动布局上看起来会乱糟糟的桌��Index.cshtml。请记住我只有一个单个的 Index.cshtml。如果我有一个 Index.mobile.cshtml的话，当呈现在移动设备上时，系统将改用该页面。

我可以用更为简洁的标记创建一个 Index.Mobile.cshtml，将表构造为一个无序的列表，然后添加一些 jQuery Mobile特定属性，如：

@model IEnumerable<MvcApplication2.Models.DVD> @{ ViewBag.Title = "My DVDs"; } <ul data-role="listview" data-filter="true" > @foreach (var item in Model) { <li> <a href="@Url.Action("Details", new { item.ID })"> <h2>@Html.DisplayFor(modelItem => item.Title)</h2> <p>@Html.DisplayFor(modelItem => item.Year) - @Html.DisplayFor(modelItem => item.rating)</p> </a> </li> } </ul>

请注意数据角色和非常基本的元素，如 <ul>、 <li>、 < h2 < 和 <p>。为了得到一些好的客户端搜索，我还添加了客户端数据筛选属性。点击刷新，它现在开始看起来像一个真正的移动网站了。

看到顶部的 ViewSwitcher 了吗？这是一个被称为 _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> }

第一行代码检查是否是移动设备发出的请求。只是注释这些代码，您就可以用桌面游览器查看和调试移动布局，在没有欺骗用户代理的情况下。

到目前为止，我们一直在谈论"移动"和以"移动"作为文件名的一部分来创建文件，这一切都很神奇。原来我们有很多对这些东西的控制。也许我们不仅想要使用 Index.mobile.cshtml，而且或许还想使用Index.iPhone.cshtml 和 Index.WP7.cshtml。

添加如下代码行到您的 Global.asax中：