2012年9月3日 星期一

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

實做步驟:
從這開始我們以Mvc4Internet為主體,將mobile的部分import過來,使得不同的裝置可以顯示不同畫面。
 




首先,在Mvc4Internet專案底下,新增一個資料夾,我們將它命名為MobileContent,表示這個資料夾是用來擺放行動版的content,並且和PC版的content做個區別。
 




再來我們將要把原本存放在行動版專案底下的檔案移轉過來,對MobileContent點選右鍵→選擇Add→選擇Existing Item…來插入現有的檔案。
 

 


找到行動版專案Mvc4Mobile中的Content資料夾,將底下的7 .css檔案選起來,並按下Add加入我們的資料夾。
 

 


完成之後您的專案應該長這樣。
 

 


接下來依照上面的步驟,在MobileContent底下新增一個資料夾,命名為Images

接著在Images資料夾底下插入現有檔案。

找到Mvc4Mobile中的Content底下的Images資料夾,將裡面的檔案全部選擇,並按下Add加入現在的專案中。
 

 


完成後您的專案應該長這樣。

這些檔案影響了行動版網頁的版面配置以及圖示。
 

 


接著我們要將行動版的 .jsimport近來。

Mvc4Internet中的Scripts資料夾底下,插入現有檔案。

找到Mvc4Mobile中的Scripts資料夾中含有mobile字樣的 .js檔,選取後按下Add按鈕加入目前專案。
 
這兩個檔案影響了我們頁面以及圖案的連結,並且寫入了滑鼠和觸控時的對應動作。
 

 


少了mobile .js檔,我們的行動版網頁會變成這樣。

下面我們要處理的是網頁頁面的部分。
 

 


若您也是使用新建的專案,在Mvc4Internet以及Mvc4Mobile底下的Views中,都會含有AccountHomeShared等三個資料夾,而其底下的 .cshtml檔案,就是我們的頁面。

將所有Mvc4MobileViews下的 .cshtml檔案備份後改名,命名原則為在 .cshtml前加上 .mobile,例如原Index.cshtml改名後為Index.mobile.cshtml,並將改名後的檔案importMvc4Internet中的相對位置,如原本Index.cshtml是在Home底下,import過來依然要放在Home中。
 

 


之後您的Mvc4Internet專案的Views資料夾應該類似上圖所示。

注意 _ViewStart.cshtml這個檔案不需要去動它,此檔案決定了當你開啟網頁時要讀取哪個Layout檔,而由於我們可以自動判讀,因此可以不用管它,若有特殊需要也可以在每個頁面另外指定要讀取的Layout檔案。
 

 


接著讓我們開啟 _Layout.mobile.cshtml檔案,由於是直接從另一個專案copy過來的,勢必要做一些調整。

針對圖中紅圈處,將其由原本的 ~/Content/css改為 ~/MobileContent/css,也就是我們剛剛新建立的,用來放行動版檔案的資料夾,這裡意思是讓它把MobileContent底下的 .css檔全部包起來。
 




最後讓我們來修改一下Global.asax.cs這個檔案,檔案拉到最下面,將原本的BundleTable.Bundles.RegisterTemplateBundles(); 給註解掉,並新加入一行BundleTable.Bundles.EnableDefaultBundles();

到這基本的搬移與修改都完成了,讓我們來測試一下吧。
 

 


首先點選專案名稱→右鍵→Rebuild,將專案重新建置。
 

 


開啟Firefox,點選工具,確認目前的瀏覽器選擇為預設的Default User Agent,也就是說,它就是你安裝的Firefox版本。
 

 


執行我們的Mvc4Internet專案,會顯示出PC版的網頁如上圖。

再來讓我們試試看Firefox的模擬功能。
 




選擇工具,並在選單內選擇一種行動裝置,這裡我們選擇模擬iPhone 3.0
 

 


選好之後重新整理,恭喜您,若沒有設定錯誤,您看到的將會是行動版本的畫面。
 
這期間我們並沒有重新執行專案,只是在切換瀏覽器狀態後重新整理一次,畫面即由PC版本跳至行動版本,可見我們的自動轉換確實的完成了實做!