由 Microsoft 提供
這是免費的 "NerdDinner" 應用程式教學課程的第 1 個步驟，詳細介紹了如何使用 ASP.NET MVC 1 建置一個小型但完整的 Web 應用程式。
步驟 1 示範如何建立基本的 NerdDinner 應用程式結構。
如果使用 ASP.NET MVC 3，建議遵循 MVC 3 使用者入門或 MVC Music 市集教學課程。
NerdDinner 步驟 1：檔案 ->新增專案
我們將從 Visual Studio 2008 或免費的 Visual Web Developer 2008 Express 中選取檔案 -> 新增專案功能表項目，開始我們的 NerdDinner 應用程式。
這樣會顯示 [新增專案] 對話方塊。 若要建立新的 ASP.NET MVC 應用程式，我們將選取對話方塊左側的 [Web] 節點，然後選擇右側的 [ASP.NET MVC Web 應用程式] 專案範本：
![[新增專案] 對話方塊的螢幕擷取畫面。選取對話方塊左側的 [Web] 節點。已選取 S P dot NET M V C Web 應用程式。](create-a-new-aspnet-mvc-project/_static/image1.png)
重要事項：請確定您已下載並安裝 ASP.NET MVC，否則不會顯示在 [新增專案] 對話方塊中。 如果尚未安裝，您可以使用 Microsoft Web Platform Installer 的 V2 (ASP.NET MVC 位於 "Web Platform->Frameworks and Runtimes" 區段)。
我們會要建立 "NerdDinner" 的新項目命名，然後按一下 [確定] 按鈕將其建立。
當我們按一下 [確定] Visual Studio 時，將會顯示其他對話方塊，提示我們選擇性地為新的應用程式建立單元測試專案。 此單元測試專案可讓我們建立自動化測試，以驗證應用程式的功能和行為 (本教學課程稍後將說明如何執行)。
![[建立單元測試專案] 對話方塊的螢幕擷取畫面。已選取 [是建立單元測試專案]。](create-a-new-aspnet-mvc-project/_static/image2.png)
上述對話方塊中的 [測試架構] 下拉式清單，會填入機器上安裝的所有可用 ASP.NET MVC 單元測試專案範本。 可以下載 NUnit、MBUnit 和 XUnit 的版本。 也支援內建的 Visual Studio 單元測試架構。
注意：Visual Studio 單元測試架構僅適用於 Visual Studio 2008 Professional 以上版本。 如果您使用 VS 2008 Standard Edition 或 Visual Web Developer 2008 Express，則必須下載並安裝適用於 ASP.NET MVC 的 NUnit、MBUnit 或 XUnit 擴充功能，才能顯示此對話方塊。 如果未安裝任何測試架構，就不會顯示該對話方塊。
我們將針對建立的測試專案使用預設的 "NerdDinner.Tests" 名稱，並使用 [Visual Studio 單元測試] 架構選項。 當我們按一下 [確定] 按鈕時，Visual Studio 會為其建立一個解決方案，其中包含兩個專案，一個用於 Web 應用程式，一個用於單元測試：
![[Nerd Dinner] 對話方塊的螢幕擷取畫面。在右側的 [方案總管] 窗格中，選取 [Nerd Dinner dot Tests]。](create-a-new-aspnet-mvc-project/_static/image3.png)
檢查 NerdDinner 目錄結構
當您使用 Visual Studio 建立新的 ASP.NET MVC 應用程式時，它會自動將數個檔案和目錄新增至專案：
根據預設，ASP.NET MVC 專案有六個最上層目錄：
| 目錄 | 用途 |
|---|---|
| Controllers/ | 將處理 URL 要求的控制器類別放在這裡 |
| /Models | 將表示和操作資料的類別放在這裡 |
| /Views | 將負責轉譯輸出的 UI 範本檔案放在這裡 |
| /Scripts | 將 JavaScript 程式庫檔案和指令碼 (.js) 放在這裡 |
| /Content | 將 CSS 和影像檔案，以及其他非動態/非 JavaScript 內容放在這裡 |
| /App_Data | 將想要讀取/寫入之資料檔案儲存在這裡。 |
ASP.NET MVC 不需要此結構。 事實上，處理大型應用程式的開發人員通常會將應用程式分割成多個專案，使其更容易管理 (例如：資料模型類別通常會在 Web 應用程式的不同類別庫專案中)。 不過，預設專案結構確實提供良好的預設目錄慣例，我們可以使用它來保持應用程式的關注點清晰分明。
當我們展開 /Controllers 目錄時，發現 Visual Studio 預設已將兩個控制器類別，HomeController 和 AccountController 新增至專案：
在預設情況下，當我們展開 /Views 目錄時，會找到 /Home、/Account 和 /Shared 這三個子目錄以及其中數個範本檔案，也會新增至專案：
當我們展開 /Content 和 /Scripts 目錄時，會找到一個 Site.css 檔案，用來設定網站上所有 HTML 的樣式，以及可在應用程式內啟用 ASP.NET AJAX 和 jQuery 支援的 JavaScript 程式庫：
![[方案總管] Nerd Dinner 導覽樹狀結構的螢幕擷取畫面。Nerd Dinner 已醒目提示並展開。](create-a-new-aspnet-mvc-project/_static/image7.png)
當我們展開 NerdDinner.Tests 專案時，會找到兩個類別，其中包含控制器類別的單元測試：
![[方案總管] 導覽樹狀結構的螢幕擷取畫面。已選取控制器並展開。](create-a-new-aspnet-mvc-project/_static/image8.png)
Visual Studio 所新增的這些預設檔案，為我們提供可用的應用程式的基本結構 - 完整包含首頁、關於頁面、帳戶登入/登出/註冊頁面，以及未處理的錯誤頁面 (這些功能都已經設定完成並可直接使用)。
執行 NerdDinner 應用程式
我們可以選擇 偵錯 -> 開始偵錯或偵錯 -> 開始但不偵錯 功能表項目來執行該專案：
![Microsoft Visual Studio 的螢幕擷取畫面。[偵錯] 功能表項目會顯示。[開始偵錯] 已醒目提示。](create-a-new-aspnet-mvc-project/_static/image9.png)
這會啟動 Visual Studio 隨附的內建 ASP.NET Web 伺服器，並執行我們的應用程式：
以下是新專案執行時的首頁 (URL：“/”)：
![[My M V C 應用程式歡迎] 頁面的螢幕擷取畫面。](create-a-new-aspnet-mvc-project/_static/image11.png)
按一下 [關於] 索引標籤會顯示關於頁面 (URL： “/Home/About”)：
![[My M V C 應用程式關於] 頁面的螢幕擷取畫面。](create-a-new-aspnet-mvc-project/_static/image12.png)
按一下右上方的 [登入] 連結，會前往 [登入] 頁面 (URL：“/Account/LogOn”)
![[My M V C 應用程式登入] 頁面的螢幕擷取畫面。](create-a-new-aspnet-mvc-project/_static/image13.png)
如果沒有登入帳戶，我們可以按一下註冊連結 (URL： “/Account/Register”) 來建立：
![[我的 M V C 應用程式] 頁面的螢幕擷取畫面。顯示 [建立新帳戶]。](create-a-new-aspnet-mvc-project/_static/image14.png)
在預設情況下，當我們建立新專案時，會新增實作上述首頁、關於和登出/註冊功能的程序碼。 我們將它用來作為應用程式的起點。
測試 NerdDinner 應用程式
如果我們使用 Professional Edition 或更新版本的 Visual Studio 2008，我們可以使用 Visual Studio 的內建單元測試 IDE 支援來測試專案：
![[測試] 功能表項目的螢幕擷取畫面。已選取 [執行] 並展開。[目前內容] 中的測試會醒目提示。](create-a-new-aspnet-mvc-project/_static/image15.png)
選擇上述其中一個選項會在 IDE 中開啟 [測試結果] 窗格，並顯示我們新專案中 27 個單元測試的通過/失敗狀態，這些測試涵蓋了內建功能。
![I D E [測試結果] 窗格的螢幕擷取畫面，顯示 27 個單元測試的通過/失敗狀態。](create-a-new-aspnet-mvc-project/_static/image16.png)
稍後在本教學課程中，我們將進一步討論自動化測試，並新增其他單元測試，以涵蓋我們實作的應用程式功能。
後續步驟
我們現在已擁有基本的應用程式結構。 現在讓我們建立資料庫來儲存應用程式資料。