在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設備的呈現了。