MVC4中的Display Mode簡介

　　本文地址:http://www.cnblogs.com/egger/p/3400076.html  歡迎轉載 ，請保留此連接๑•́ ₃•̀๑！

　　今天學習MVC4時，看到一個不錯的特性"view override" 。這是個什麼功能呢？請看下面的示例。

 示例

　　1.首先建立一個MVC4 Web應用程序，直接默認便可。選擇Internet 模版,視圖引擎 Razor，單元測試項目選不選不要緊反正用不到！

　　      

 

　　2.項目建立完成後，咱們就能夠直接運行了！這是MVC默認的主頁 ，路徑「~/home/index」：

　　

 

 

 

　　咱們將Home視圖文件夾下的Index.cshtml 頁面在項目複製下，改下名稱 「Index.Mobile.cshtml」，此時兩個頁面代碼是一致的，咱們更改「Index.Mobile.cshtml」頁面中ViewBag的Title屬性 ，改成「Mobile Page」：

　　

　　

　　咱們修改的Title屬性將在下圖中紅框中的位置顯示！ Index.cshtml中是Home Page,若運行「Index.Mobile.cshtml」，咱們將在紅框出看到的應該是Mobile Page！

　　

 

　　3.如今將咱們建立的MVC網站發佈到IIS中，注意網站應用程序池 .NET Framework 請選擇 4.0，同時將電腦的統自帶的和殺軟的防火牆功能關閉：

　　　　

　　

　　

　　4. 將手機鏈接wifi,打開瀏覽器輸入本地地址+端口號（80就不用了），運行結果以下，出現的是「Mobile Page」。說明此時加載的是 Index.Mobile.cshtml 這個頁面。

　　

 

　　5.初次讓人沒法理解，咱們在Index.Mobile.cshtml 頁面打下斷點，當使用手機進行訪問時，看是否命中，若是命中，那就是Index.Mobile.cshtml沒的跑了:

　　

　　使用VS附加到進程進行調試(若是找不到玩w3wp.exe,請將「顯示全部用戶的進程」勾選上)：

　　  

 

　　6.手機從新輸入網址或刷新頁面，此時VS斷點已命中說明咱們訪問的是Index.Mobile.cshtml ！

　　

 

   進一步瞭解 view override 

　　讀到到這裏你們也許會有不少疑惑，爲何建立個Index.Mobile.cshtml 頁面使用手機就能訪問，使用web就不能訪問；那我新建個Index.Phone.cshtml怎麼就都訪問不到呢?

　　我比較好奇系統是怎麼分辨出我訪問的設備呢？由於暴漏的代碼中沒有看到相關的功能代碼！

　　以上的情景在任何設備商都是經過瀏覽器訪問的頁面！不知你們在web開發過程當中有沒有遇到須要檢測瀏覽器類型和版本狀況，若是作過想必對「Javascript客戶端檢測」和「用戶代理字符串 User-Agent (UA) 」的知識點不陌生，知道咱們瀏覽器在進行HTTP請求時會加上 瀏覽器 引擎 版本號等信息，咱們能夠經過一些明顯的字符進行區分！那麼咱們剛纔看到的效果是否用到的UA的檢測，可是沒有看到相關的代碼呢？

　　

用戶代理字符串簡史：  http://www.cnblogs.com/egger/archive/2013/04/20/3032070.html

[Javascript]客戶端檢測：  http://www.cnblogs.com/egger/archive/2013/04/26/3045285.html

 

　　上面的疑惑咱們接下來慢慢解釋，上面演示的功能是MVC4的一個特性： view override 或者 Display Mode。

　　Dispaly Mode特性相關的類是 DisplayModeProvider [MSDN傳送門]

　　咱們看到DisplayModeProvider 有兩個常量字段 「Mobile」 、 「」。Mobile 應該不陌生把！這個不是咱們上面建立的Index.Mobile.cshtml中間的字符嗎。上面咱們建立Index.Phone.cshtml就沒有Index.Mobile.cshtml的效果說明c和這兩個常量字段有關！

 　　

 

　　  Display Mode有2個，​一個是Mobile、一個是「」。系統根據瀏覽器的類型決定使用訪問哪一個View.咱們也能夠在Application_Start中有加入其餘的Display Mode，可是對應的View並沒有對應的view，就會選擇默認View！以Index視圖l爲例，訪問視圖的Index.DisplayModeId.cshtml,  若DisplayModeId爲「」，就訪問Index.cshtml；若是DisplayModeId爲「Mobile」，那就訪問Index.Mobile.cshtml頁面！

 　　

　　也許你們有些頭緒了，原來這麼一回事。可是咱們上面的疑惑關於如何區分瀏覽器DisplayModeId的機制沒有說！別急咱們繼續看上文中說道咱們能夠在Application_Start中有加入其餘的Display Mode，咱們先學習下如何操做，請看代碼：

　　　　　protected void Application_Start()
        {
            DisplayModeProvider.Instance.Modes
             .Insert(0, new DefaultDisplayMode("Android")
             {
                 ContextCondition = (context =>
                       context.GetOverriddenUserAgent().IndexOf
                       ("Android", StringComparison.OrdinalIgnoreCase) >= 0)
             });

            DisplayModeProvider.Instance.Modes
             .Insert(1, new DefaultDisplayMode("FF")
             {
                 ContextCondition = (context =>
                       context.GetOverriddenUserAgent().IndexOf
                       ("Firefox", StringComparison.OrdinalIgnoreCase) >= 0)
             });

            DisplayModeProvider.Instance.Modes
            .Insert(2, new DefaultDisplayMode("Chrome")
            {
                ContextCondition = (context =>
                      context.GetOverriddenUserAgent().IndexOf
                      ("Chrome", StringComparison.OrdinalIgnoreCase) >= 0)
            });
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            AuthConfig.RegisterAuth();
        }

　　我在添加了3個 DisplayMode,分別區分android手機瀏覽器、Chrome瀏覽器、Firefox瀏覽器。咱們使用 context.GetOverriddenUserAgent() 來獲取UserAgent信息，從而對瀏覽器進行檢測，這證明了咱們上面的想法方向對了！

　　獲取的UA信息：

　　Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25

　　

 

　　初始DisplayMode，只有兩個：

　　

　　DisplayMode添加完成：

　　

　　建立頁面後，看看效果如何：

　　

　　下面是運行截圖：

　　FF　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　IE 使用默認的視圖

　　     

　　Chrome 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Android

　　     

 

 總結

　　本文到此就結束了！雖然說這特性雖然說爲了解決移動設備頁面展現問題！可是咱們能夠靈活運用，怎麼用還憑更人發揮！

　　倉促之間，不免有誤，清指出，謝謝！

相關文章閱讀

http://www.dotblogs.com.tw/rainmaker/archive/2012/06/21/72946.aspx

http://techbrij.com/display-mode-mobile-tablet-tv-aspnet-mvc

http://ericsowell.com/blog/2011/9/27/doing-crazy-things-with-asp-net-mvc-4s-display-modes

http://weblogs.asp.net/gunnarpeipman/archive/2011/09/18/asp-net-mvc-4-display-modes.aspx