原文:
返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性
返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性
作者：webabcd
介绍
asp.net mvc 之 asp.net mvc 4.0 新特性之移动特性
- 为不同的客户端提供不同的视图
- 手动重写 UserAgent，从而强制使用对应的视图
示例
1、演示如何为不同的客户端提供不同的视图
Global.asax.cs
/* * 为了更好地支持移动设备，mvc 4.0 带来了一些新的特性 * * 本 demo 演示如何方便地为不同客户端提供不同的视图 */ using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Http; using System.Web.Mvc; using System.Web.Optimization; using System.Web.Routing; using System.Web.WebPages; namespace MobileFeature { public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { // 为 windows phone 客户端新增加一个名为 wp 的显示模式 DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("wp") { // 设置判断 windows phone 客户端的条件 ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf ("Windows Phone", StringComparison.InvariantCultureIgnoreCase) >= 0) }); /* * 显示模式可以方便地为不同客户端提供不同视图 * 默认 DisplayModeProvider.Instance.Modes 有两种显示模式，分别是 Mobile 和 "" * * 以 Home/Index.cshtml 为例 * 1、windows phone 客户端访问会使用 Index.wp.cshtml 视图 * 2、其他移动客户端访问会使用 Index.Mobile.cshtml 视图 * 3、不符合以上两个条件的客户端访问会使用 Index.cshtml 视图 * 注：找不到对应的视图时，会默认使用 Index.cshtml 视图 */ AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(GlobalConfiguration.Configuration); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); } } }
Index.cshtml
@{ ViewBag.Title = "主页"; } <h2>@ViewBag.Message</h2> <p> 若要了解有关 ASP.NET MVC 的详细信息，请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>。 </p> <h1>为非移动设备提供的页面</h1> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">导航</li> <li>@Html.ActionLink("关于", "About", "Home")</li> <li>@Html.ActionLink("联系方式", "Contact", "Home")</li> </ul> <script type="text/javascript"> alert("是否是移动设备：@Request.Browser.IsMobileDevice.ToString()"); </script>
Index.wp.cshtml
@{ ViewBag.Title = "主页"; } <h2>@ViewBag.Message</h2> <p> 若要了解有关 ASP.NET MVC 的详细信息，请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>。 </p> <h1>为 windows phone 提供的页面</h1> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">导航</li> <li>@Html.ActionLink("关于", "About", "Home")</li> <li>@Html.ActionLink("联系方式", "Contact", "Home")</li> </ul> <script type="text/javascript"> alert("是否是移动设备：@Request.Browser.IsMobileDevice.ToString()"); </script>
Index.Mobile.cshtml
@{ ViewBag.Title = "主页"; } <h2>@ViewBag.Message</h2> <p> 若要了解有关 ASP.NET MVC 的详细信息，请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>。 </p> <h1>为非 windows phone 的移动设备提供的页面</h1> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">导航</li> <li>@Html.ActionLink("关于", "About", "Home")</li> <li>@Html.ActionLink("联系方式", "Contact", "Home")</li> </ul> <script type="text/javascript"> alert("是否是移动设备：@Request.Browser.IsMobileDevice.ToString()"); </script>
2、演示如何手动重写 UserAgent，从而强制使用对应的视图
ViewSwitcherController.cs
/* * 演示如何手动重写 UserAgent，从而强制使用对应的视图 */ using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using System.Web.Mvc; using System.Web.WebPages; namespace MobileFeature.Controllers { public class ViewSwitcherController : Controller { public ActionResult SwitchView(bool? mobile) { mobile = mobile ?? false; // 重写 UserAgent HttpContext.SetOverriddenBrowser(mobile.Value ? BrowserOverride.Mobile : BrowserOverride.Desktop); // HttpContext.SetOverriddenBrowser(string userAgent); return View(); } } }
SwitchView.cshtml
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>非移动设备</title> </head> <body> <h2>非移动设备</h2> <!--判断重写后的 UserAgent--> @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice) { // ViewContext.HttpContext.GetOverriddenUserAgent() @: Displaying mobile view @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false }, null) } else { @: Displaying desktop view @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true }, null) } </body> </html>
SwitchView.Mobile.cshtml
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>移动设备</title> </head> <body> <h2>移动设备</h2> <!--判断重写后的 UserAgent--> @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice) { // ViewContext.HttpContext.GetOverriddenUserAgent() @: Displaying mobile view @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false }, null) } else { @: Displaying desktop view @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true }, null) } </body> </html>
OK
[源码下载]
