[JQM][003][MVC 4 Mobile Features]建立第一个jquery mobile行动网页

摘要:[JQM][003][MVC 4 Mobile Features]建立第一个jquery mobile行动网页

首先根据上篇

[JQM][002][MVC 4 Mobile Features]Overriding Views,Layouts,and Partial Views

建立起.mobile.chtml网页

然后安装nuget的jquery.mobile.mvc套件：

安装完毕之后，马上出现以下提醒，这是告诉你，要把这一行程序加入到Gloabal.asax才可以使用默认的mobile template

当然我们就按照他的指示去加入：

    BundleMobileConfig.RegisterBundles(BundleTable.Bundles);

不过，安装的同时，也出现提示，我们的_Layout.mobile.cshtml也被覆盖掉了，其实只是改引用jquery mobile的js函数库跟css而已

安装完毕不代表行动网页就完成了，但是至少再看一下行动版的画面的时候，css已经套用为jquery mobile版本了：

接下来TestOverride.mobile.cshtml还要改成jquery mobile专用的html：

table的部分，要改用ul, li去做，而ul要加上属性data-role="listview"

@model IEnumerable

    @model IEnumerable    @{      ViewBag.Title = "TestOverride";  }    TestOverride            @foreach (var item in Model)      {                                          @Html.DisplayFor(modelItem => item.Title)                  此项目的重点可以放这边                  项目的细节可以放这 ： @Html.DisplayFor(modelItem => item.NationalIDNumber)                  连接到yahoo                                                }    

执行之后的画面像是这样，的确是行动版的网页了，不过怎么看起来整个背景黑压压的，跟官方网页的示范不一样，原来是theme的设定不一样

详见下篇：

[JQM][004][MVC 4 Mobile Features]data-theme属性修改版面颜色以及ViewSwitcher切换电脑版或行动版网页

http://www.dotblogs.com.tw/kevinya/archive/2015/11/03/153776.aspx

参考数据：

ASP.NET MVC 4 Mobile Features

http://www.asp.net/mvc/overview/older-versions/aspnet-mvc-4-mobile-features

原文:大专栏  [JQM][003][MVC 4 Mobile Features]建立第一个jquery mobile行动网页

来源：https://www.cnblogs.com/petewell/p/11457809.html