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