2012年9月3日 星期一

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!接下來就讓我們開始實做,讓裝置來決定您的網頁該長什麼樣子。