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

在經過了幾次測試之後，我們可以發現，這MVC 4的確有這種隨裝置轉換畫面的功能，可是似乎不是所有裝置都支援？ 

沒錯，根據實驗結果，目前有完整支援的只有IOS系統以及Windows Phone系列，其他如Android之類都不能確實的判斷，那該怎麼解決好呢？以下就要教大家來實作。 

MVC 4無法自動判定IOS和Windows Phone系統以外的裝置，沒關係，我們可以使用它另一個內建的功能，來強制使網頁針對不同的裝置做出正確判斷！

 



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

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

使用這個方法，可以針對各種不同的裝置呈現出不同的畫面，例如Android、iPhone等等，另外也可以指定相異的瀏覽器，如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所需要的library所import近來。

 

 

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

 

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

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

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加入現在的專案中。

 

 

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

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

 

 

接著我們要將行動版的 .js檔import近來。

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

找到Mvc4Mobile中的Scripts資料夾中含有mobile字樣的 .js檔，選取後按下Add按鈕加入目前專案。

 
這兩個檔案影響了我們頁面以及圖案的連結，並且寫入了滑鼠和觸控時的對應動作。

 

 

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

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

 

 

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

將所有Mvc4Mobile中Views下的 .cshtml檔案備份後改名，命名原則為在 .cshtml前加上 .mobile，例如原Index.cshtml改名後為Index.mobile.cshtml，並將改名後的檔案import到Mvc4Internet中的相對位置，如原本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版本跳至行動版本，可見我們的自動轉換確實的完成了實做！

ASP.NET MVC 4 Display Modes 實作 PC / Mobile 轉換 (二)建立專案

都安裝好以後就可以開始建置我們的專案了。

 

 

首先開起您的Visual Studio，並選擇建立新專案。

 

專案精靈跑出來之後，在右上角搜尋處輸入：mvc 4。

 

若安裝正確，此時會跑出兩個結果，我們選擇Visual C#這個。

 

下方專案名稱以及儲存位置隨您選擇，我們使用Mvc4Internet來表示這是一個PC版的網頁專案。

設定好以後按下右下角的OK按鈕進入下一步。

 

 

在這裡由於要建立PC版網頁專案，所以我們選擇Internet Application。

其他部分使用預設值即可，設定完後我們按下右下角OK按鈕建立專案。

 

 

若一切正常，您的新專案應該長這樣。

再來讓我們建立一個行動版網頁專案。

 

 

依樣畫葫蘆，另外建立一個新的專案，由於是要給行動版的，我們命名為Mvc4Mobile來跟PC版做區隔。

 

設定完按下右下角的OK按鈕進入下一步。

 

 

這裡我們改選Mobile Application樣板，其他部分一樣使用預設，完成後按OK按鈕建立專案。

 

 

您的行動版專案建立好以後應該長這樣。

再來讓我們對行動版專案做一些設定。

 

 

首先對您的專案名稱按下右鍵，在選單中找到Manage Nuget Packages…，這就是我們將要使用的小工具。

 

 

開啟Manage Nuget Packages之後，在右上角輸入jquery mobile，中間結果中的jQuery Mobile即是我們要安裝的東西，他會幫我們自動建立許多行動版該有的物件。

按下Install按鈕開始安裝。

 

 

看到這個小視窗跑出來表示正在安裝中。

 

 

安裝完成後會在jQuery Mobile的右上角看到一個綠色的勾勾，表示正確安裝完成，按下右下角的Close按鈕關閉式窗。

這時候基本的專案已經建立完成了。

讓我們分別來看看專案的樣板模式長什麼樣子。

 

 

在Mvc4Internet這個專案中按下F5(預設為Debug)，您的PC版專案應該長得像上面這樣子，由於我們什麼都沒編輯，可以看得出來這是MVC 4內建的樣板。

 

 

接下來在Mvc4Mobile專案中按下F5，您的行動版專案應該長得像上面這樣。

OK！接下來就讓我們開始實做，讓裝置來決定您的網頁該長什麼樣子。

ASP.NET MVC 4 Display Modes 實作 PC / Mobile 轉換 (一)事前準備

本篇要來分享的就是：如何使用微軟的ASP.NET MVC 4中的 Disolay Modes功能，來實作讓您的網頁在一般PC以及行動裝置上呈現不同的面貌。

 

雖然網路上有不少類似的教學，但是很多都沒有詳細的步驟，不是缺這裡就是缺那裏，故而分享此篇從頭動手做，希望能對有需要的人有更多的幫助。

本次DEMO為在一般PC版網頁專案下加入行動版的網頁，若您已經有完整的PC版以及行動版專案，可以直接從實作部分開始看。

 

事前準備：

首先最最重要的，我們的工具要先準備好。

 

您可以在microsoft的網站找到Visual Studio，依據您的需要選擇版本。

點我下載

http://www.microsoft.com/taiwan/vstudio/2010/download/default.aspx

 

再來至ASP.NET的網站下載並安裝ASP.NET MVC 4。

點我下載

http://www.asp.net/mvc/mvc4

為了之後測試需要，我們還要安裝Firefox外掛套件。

至以下網址下載 .xml檔案並儲存。

點我下載

http://techpatterns.com/downloads/download_item.php?folder=firefox&filename=useragentswitcher.xml

 

下載完以後，還要進行import的動作。

 



開啟Firefox，點選工具→Default User Agent→Edit User Agents…。

 

 

 

點選左下角的Import…，並找到剛剛下載的 .xml檔案的位置，該檔案名稱為useragentswitcher.xml，選擇並開啟檔案。

 



這時在您的User Agents欄位中的選項應該有出現類似上面這些項目(或著更多)，按下確定按鈕結束，之後我們就可以使用Firefox來模擬各種裝置了。