ASP.NET MVC4桌面与移动视图（MVC4显示模式）

I. MVC4显示模式简介

MVC 4引进了显示模式功能，这个功能可以简单的为不同设备显示不同的视图。

换名话说，假设我们网页的内容是为桌面版的浏览器设计的，但是在移动浏览器或其它设备浏览器中没有良好的可读性，现在针对这种情况可以为不同的设备创建不同的视图。

在早期的版本中，通过我们自己的框架来解决兼容性问题，并且要写很多代码。MVC 4执行这个非常简单。

我们将在下面的步聚中看到在MVC 4中如何执行显示模式。

II. 如何测试？

通过下面的选项我们可以测试不同的视图： 

1. 我们需要一个模拟器，在这篇文章中我用的是Windows mobile 7模拟器。
2. 另外，我们可以在桌面浏览器中设置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实现的方案，我会尽快在我的博客中介绍它。希望你有所收获。

原文：http://www.codeproject.com/Tips/704007/Desktop-and-Mobile-Browser-View-in-MVC-4-MVC-4-Dis