ASP.NET MVC 4中如何為不同的瀏覽器自適應布局和視圖


在ASP.NET MVC 4中,可以很簡單地實現針對不同的瀏覽器自適應布局和視圖。這個得歸功於MVC中的"約定甚於配置"的設計理念。

默認的自適應

MVC 4自動地為移動設備瀏覽器和PC設備瀏覽器進行自適應。針對布局頁面,默認的文件名為_Layout.cshtml,這個默認會被所有的瀏覽器使用。但如果我們希望在移動設備上面,呈現一個不同的布局,只需要添加一個名稱為_Layout.Mobile.cshtml的布局頁面就可以了。同樣的規則,也適用於普通的視圖頁面。例如Index.cshtml默認是被所有的瀏覽器使用的,但如果添加了Index.Mobile.cshtml,則在移動設備上面,會自動使用這個新的視圖進行呈現。如下圖所示

那么,為什么會能夠自動實現這樣的功能呢?或者我們該問問,怎么樣才能區分移動設備瀏覽器呢?其實,這個說起來是不難的

下面這個文章介紹了關於瀏覽器檢測的一些基本概念http://msdn.microsoft.com/zh-cn/library/x3k2ssx2(v=vs.100).aspx

在ASP.NET MVC中,是在什么位置,通過什么樣的方式來進行這個檢測,並且據此進行布局或視圖的選擇的呢?

通過分析源代碼(http://aspnetwebstack.codeplex.com/ ),我們可以在下面的代碼中發現端倪

所以,這個功能是在DisplayModeProvider這個類型中實現的。它默認注冊了兩個所謂的DefaultDisplayMode,其中第一個是有條件判斷的,根據IsMobileDevice屬性判斷是不是移動設備瀏覽器,如果是,則使用一個固定的前綴Mobile。這個DefaultDisplayMode類型,會自動做路徑的Transform。

 

自定義適應規則

 

如果理解了上面的原理,我們就可以根據需要添加自己的規則。例如,我們可以為iPhone設備添加一個特定的顯示模型,可以修改global.asax中的代碼。

 

這樣的話,只要添加下面的布局或者視圖頁面的話,就可以很簡單地實現針對iPhone設備的呈現了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM