I. MVC4显示模式简介
MVC 4引进了显示模式功能,这个功能可以简单的为不同设备显示不同的视图。
换名话说,假设我们网页的内容是为桌面版的浏览器设计的,但是在移动浏览器或其它设备浏览器中没有良好的可读性,现在针对这种情况可以为不同的设备创建不同的视图。
在早期的版本中,通过我们自己的框架来解决兼容性问题,并且要写很多代码。MVC 4执行这个非常简单。
我们将在下面的步聚中看到在MVC 4中如何执行显示模式。
II. 如何测试?
通过下面的选项我们可以测试不同的视图:
- 我们需要一个模拟器,在这篇文章中我用的是Windows mobile 7模拟器。
- 另外,我们可以在桌面浏览器中设置user agent值来测试。这是设置User agent的设置步聚:
打开 IE --> 按下 F 12 --> 工具栏 --> 选择 user agent 字符串 --> 选择你想要的。
引用下面的图片:
在上文中,我做了一个Windows phone 8的设置。我没有添加Iphone设置。
III. 创建通用移动设备视图
请按照下面的步骤去创建通用的移动设备视图。
步骤1: 为移动视图创建一个layout视图。可以快速执行,复制“Views\Shared\_Layout.cshtml” 贴贴到同样的目录并且修改这个layout文件名为 “\_Layout.Mobile.cshtml” (“Views\Shared\_Layout.Mobile.cshtml”).
步骤2: 修改“\_Layout.Mobile.cshtml”页面头部文字去识别layout视图是来自于移动版本。
步骤3: 复制“Views\Home\index.cshtml”并贴贴到相同的目录,修改文件名字为“Views\Home\index.Mobile.cshtml”。
步骤4: 修改“\Index.Mobile.cshtml”页面的头部文字去识别这个index是运行的移动版本。
如果有任何视图需要为配置到移动设备,请按上面的处理步骤。
运行并且在IE浏览器上测试
1. 桌面视图
按F5,浏览器会显示桌面视图的版本,如下图。我们可以看见Layout和index页面头部显示为“Desktop”。
2. 移动视图
按照上文解释的做IE配置。在IE中,按F12 --> tools --> change user agent string --> ”IE10 for Windows Phone 8”。刷新页面,现在移动视图出来了。
在Windows mobile 7模拟器中的移动视图:
IV. 特定的浏览器或设备视图
在上面,我们已经创建了一个通用的移动视图,所以任何时候通过移动设备或iPad访问网站都会看到移动视图。现在的情况是,我们想去创建一个iPhone视图或指定一个特殊设备。MVC4只需要做相关的配置就能实现这个功能。
下面以“iPad”为例,我已经在浏览器中加入了iPad的User agent。
步聚1: 打开 Global.Asax 并且添加下面的代码到 “Application_Start()
” 方法,也需要添加名称空间 “using System.Web.WebPages;
”.
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPad")
{
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
("iPad", StringComparison.OrdinalIgnoreCase) >= 0)
});
步聚2: 为iPad创建一个Layout。可以快速实现,复制 “ Views\Shared\_Layout.cshtml” 贴贴到相同的位置并修改layout名字为“ \_Layout.iPad.cshtml” (“ Views\Shared\_Layout.iPad.cshtml”)。
步聚3: 修改 “\_Layout.iPad.cshtml” 的头部文字用来识别layout来自哪个移动版本的视图。
步聚4: 复制 “Views\Home\index.cshtml” 并且贴贴到相同的位置,修改文件名为 “Views\Home\index.iPad.cshtml” 。
步聚5: 修改 “\Index.iPad.cshtml” 的头部文字用来识别index来自哪个移动版本的视图。
如有任何视图需要为iPad配置视图,请按上面的步骤处理。
在IE浏览器中运行并测试
移动视图
如上面解释的做IE设置。在IE中, 按 F12 --> tools --> change user agent string --> ”iPad”.
刷新页面,现在iPad视图重载并出现了。
总结
在这篇文章中,我解释了一种执行移动视图的方法。还有另一种通过JQuery实现的方案,我会尽快在我的博客中介绍它。希望你有所收获。