返璞归真 asp.net mvc (12) - asp.net mvc 4.0 新特性之移动特性

asp.net mvc 之 asp.net mvc 4.0 新特性之移动特性: 为不同的客户端提供不同的视图; 手动重写 UserAgent，从而强制使用对应的视图

介绍

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