返璞歸真 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
[源碼下載]