2012年9月3日 星期一

ASP.NET MVC 4 Display Modes 實作 PC / Mobile 轉換 (四)後續

在經過了幾次測試之後,我們可以發現,這MVC 4的確有這種隨裝置轉換畫面的功能,可是似乎不是所有裝置都支援? 
沒錯,根據實驗結果,目前有完整支援的只有IOS系統以及Windows Phone系列,其他如Android之類都不能確實的判斷,那該怎麼解決好呢?以下就要教大家來實作。 
MVC 4無法自動判定IOSWindows Phone系統以外的裝置,沒關係,我們可以使用它另一個內建的功能,來強制使網頁針對不同的裝置做出正確判斷!
 



首先讓我們再度開啟Mvc4Internet專案底下的Global.asax.cs檔案。

將上面紅色框框中的程式碼加在檔案的最後,而其中紅字顯示的”Android”,就是我們要讓它判斷的裝置了。

使用這個方法,可以針對各種不同的裝置呈現出不同的畫面,例如AndroidiPhone等等,另外也可以指定相異的瀏覽器,如MSIE9
 




讓我們以Android為例子,修改完Global.asax.cs檔案之後,只要網頁偵測到使用者是使用Android系列的裝置,自動就會去抓取含有 .Android字樣的 .cshtml檔案。

由於我們只是要測試是否能夠成功轉換,因此只針對首頁用的到的檔案去做變更。

Index.Mobile.cshtml_Layout.mobile.cshtml、以及 _LoginPartial.mobile.cshtml三個檔案複製一份,並分別改名為Index.Android.cshtml_Layout.Android.cshtml、與 _LoginPartial.Android.cshtml,這樣我們就有了Android專用的首頁了。
 

 
 
在開始測試之前,別忘了先對專案進行rebuild

 

這時我們可能會碰到一個錯誤,告訴我們剛剛加入的DisplayModeProvider沒有定義!別擔心,將你的滑鼠移過去將它反白起來,會在左下角出現一個圖示,點選以後會出現一個下拉選單,我們選擇第一個選項using System.Web.WebPages,這時候再重新rebuild一次就正常囉,這是由於我們剛剛沒有將DisplayModeProvider所需要的libraryimport近來。
 
 



接下來再打開您的Firefox,隨便選擇一種Android device,這邊以Android 2.2 - HTC Evo – Mobile Safari 533.1為例子。


 


選取之後再度執行我們的專案,發現Android裝置也可以正常的判斷為行動裝置,並顯示Android的專用頁面了!



以上使用ASP.NET MVC 4,讓您的網頁在一般PC以及行動裝置上呈現不同的面貌教學告一段落,若有任何錯誤或疑問請不吝指教。