共用方式為

第 1 部分：概觀和檔案 > 新增專案

  • 發行項

作者 ：JonGaloway

MVC 音樂市集是一個教學課程應用程式，會介紹並說明如何使用 ASP.NET MVC 和 Visual Studio 進行 Web 開發。

MVC 音樂市集是輕量型的市集實作，可線上銷售音樂相簿，並實作基本網站管理、使用者登入和購物車功能。

本教學課程系列詳細說明建置 ASP.NET MVC 音樂市集範例應用程式所採取的所有步驟。 第 1 部分涵蓋概觀和檔案新增 > 專案。

概觀

MVC 音樂市集是一個教學課程應用程式，會介紹並說明如何使用 ASP.NET MVC 和 Visual Web Developer 進行 Web 開發。 我們將緩慢開始，因此初學者層級的 Web 開發體驗沒問題。

我們將建置的應用程式是簡單的音樂市集。 應用程式有三個主要部分：購物、結帳和管理。

[A P 點 Net Music Store 概觀] 功能表的螢幕擷取畫面，其中包含選取內容類型的選項，或從頂端選擇選項。

訪客可以依內容類型流覽相簿：

[S P 點 Net music store 內容類型] 的螢幕擷取畫面，其中顯示指定內容類型中的相簿集合。

他們可以檢視單一的相簿，並將其新增至購物車：

[相簿選取範圍] 視窗的螢幕擷取畫面，其中顯示相簿的名稱、內容類型、作者和價格，以及新增至購物車的選項。

他們可以檢閱購物車，移除不再需要的任何專案：

[檢閱購物車] 功能表的螢幕擷取畫面，其中包含編輯購物車或結帳的總價格資訊和選項。

繼續簽出會提示他們登入或註冊使用者帳戶。

[登入] 功能表列的螢幕擷取畫面，要求使用者輸入使用者名稱和密碼，以及按一下 [記住我] 按鈕的選項。

[建立新帳戶] 功能表列的螢幕擷取畫面，該功能表列會要求使用者名稱、電子郵件地址，以及包含六個或多個字元的密碼。註冊按鈕位於畫面底部。

建立帳戶之後，他們可以填寫出貨和付款資訊來完成訂單。 為了保持簡單，我們正在執行令人讚歎的促銷：如果他們輸入促銷碼「免費」，一切都是免費的！

Screnshot 顯示購買者運送和付款資訊的進入選項，並具有輸入促銷碼的預留位置。

排序之後，他們會看到簡單的確認畫面：

確認畫面的螢幕擷取畫面，感謝客戶提供訂單號碼。

除了客戶面向的頁面之外，我們也會建置系統管理員區段，其中顯示系統管理員可從中建立、編輯和刪除相簿的相簿清單：

系統管理員區段功能表的螢幕擷取畫面，其中顯示擁有的相簿標題、作者和內容類型清單;包含編輯或刪除每一個選項的選項。

1. 檔案 - > 新增專案

安裝軟體

本教學課程會從使用免費的 Visual Web Developer 2010 Express (免費) 建立新的 ASP.NET MVC 3 專案開始，然後我們會以累加方式新增功能來建立完整的運作應用程式。 在過程中，我們將涵蓋資料庫存取、表單張貼案例、資料驗證、使用主版頁面進行一致的頁面配置、使用 AJAX 進行頁面更新和驗證、使用者登入等等。

您可以逐步遵循，也可以從 MVC-Music-Store下載已完成的應用程式。

您可以使用 Visual Studio 2010 SP1 或 Visual Web Developer 2010 Express SP1 (免費版本的 Visual Studio 2010) 來建置應用程式。 我們將使用SQL Server Compact (也免費) 來裝載資料庫。 開始之前，請確定您已安裝下列必要條件。

  • [Visual Studio Web Developer Express SP1 必要條件]
  • [ASP.NET MVC 3 工具更新]
  • [SQL Server Compact 4.0] - 包括執行時間和工具支援

建立新的 ASP.NET MVC 3 專案

我們將從 Visual Web Developer 的 [檔案] 功能表選取 [新增專案] 開始。 這會顯示 [新增專案] 對話方塊。

Visual Web 開發人員檔案功能表的螢幕擷取畫面，其中顯示用於建立新專案的選取範圍和簡短鍵盤命令。

我們將選取左側的 [Visual C# - > Web 範本] 群組，然後在中央資料行中選擇 [ASP.NET MVC 3 Web 應用程式] 範本。 將專案命名為 MvcMusicStore，然後按 [確定] 按鈕。

[新增專案對話方塊] 視窗功能表的螢幕擷取畫面，提供不同的應用程式選項範本。

這會顯示次要對話方塊，讓我們能夠針對專案進行一些 MVC 特定設定。 選取下列選項：

專案範本 - 選取 [空白]

檢視引擎 - 選取 Razor

使用 HTML5 語意標記 - 已核取

確認您的設定如下所示，然後按 [確定] 按鈕。

次要對話方塊的螢幕擷取畫面，允許使用者為其專案選取不同的設定。

這會建立我們的專案。 讓我們看看已在右側的方案總管中新增至應用程式的資料夾。

專案建立之後，方案總管視窗的螢幕擷取畫面，其中顯示已新增至應用程式的資料夾清單。

空白 MVC 3 範本不是完全空白的 ， 它會新增基本資料夾結構：

上述資料夾清單的縮放螢幕擷取畫面檢視，反白顯示所建立專案的名稱。

ASP.NET MVC 會使用資料夾名稱的一些基本命名慣例：

資料夾 目的
/控制器 控制器會回應瀏覽器的輸入、決定該怎麼做，並將回應傳回給使用者。
/視圖 檢視保存我們的 UI 範本
/模型 模型會保存及運算元據
/內容 此資料夾會保存我們的影像、CSS 和其他任何靜態內容
/腳本 此資料夾會保存我們的 JavaScript 檔案

這些資料夾甚至包含在空白 ASP.NET MVC 應用程式中，因為 ASP.NET MVC 架構預設使用「設定慣例」方法，並根據資料夾命名慣例進行一些預設假設。 例如，控制器預設會在 Views 資料夾中尋找檢視，而不需要在程式碼中明確指定此檢視。 遵守預設慣例可減少您需要撰寫的程式碼數量，也可以讓其他開發人員更容易瞭解您的專案。 我們會在建置應用程式時更進一步說明這些慣例。

下一步