1. 程式人生 > >ASP.NET MVC 4中如何為不同的瀏覽器自適應佈局和檢視

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

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

預設的自適應

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

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

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

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

自定義適應規則

如果理解了上面的原理,我們就可以根據需要新增自己的規則。例如,我們可以為iPhone裝置新增一個特定的顯示模型,可以修改global.asax中的程式碼。

這樣的話,只要新增下面的佈局或者檢視頁面的話,就可以很簡單地實現針對iPhone裝置的呈現了。