asp.net mvc 4.0 新特性之移动特性

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>