共用方式為

ASP.NET MVC 3 簡介 (C#)

  • 發行項

作者： Rick Anderson

注意

這裡提供本教學課程的更新版本，其使用 ASP.NET MVC 5 和 Visual Studio 2013。 更安全、更容易遵循並示範更多功能。

本教學課程將教導您使用 Microsoft Visual Web Developer 2010 Express Service Pack 1 建置 ASP.NET MVC Web 應用程式的基本概念，這是 Microsoft Visual Studio 的免費版本。 開始之前，請確定您已安裝下列必要條件。 您可以按一下下列連結來安裝所有元件： Web Platform Installer。 或者，您可以使用下列連結個別安裝必要條件：

如果您使用 Visual Studio 2010 而不是 Visual Web Developer 2010，請按一下下列連結來安裝必要條件： Visual Studio 2010 必要條件。

具有 C# 原始程式碼的 Visual Web Developer 專案隨附于本主題中。 下載 C# 版本。 如果您偏好使用 Visual Basic，請切換至本教學 課程的 Visual Basic 版本 。

您要建置的內容

您將實作簡單的電影清單應用程式，以支援從資料庫建立、編輯及列出電影。 以下是您將建置之應用程式的兩個螢幕擷取畫面。 其中包含一個頁面，顯示資料庫中的電影清單：

MoviesWithVariousSm

應用程式也可讓您新增、編輯和刪除電影，以及查看個別電影的詳細資料。 所有資料輸入案例都包含驗證，以確保儲存在資料庫中的資料正確無誤。

支援從資料庫建立編輯和列出電影的電影清單應用程式的螢幕擷取畫面。

您要學習的技術

以下是您要學習的內容：

  • 如何建立新的 ASP.NET MVC 專案。
  • 如何建立 ASP.NET MVC 控制器和檢視。
  • 如何使用 Entity Framework Code First 範例建立新的資料庫。
  • 如何擷取和顯示資料。
  • 如何編輯資料並啟用資料驗證。

開始使用

從執行 Visual Web Developer 2010 Express (「Visual Web Developer」 開始，簡短) ，然後從[開始] 頁面中選取 [新增專案]。

Visual Web Developer 是 IDE 或整合式開發環境。 就像使用 Microsoft Word來撰寫檔一樣，您會使用 IDE 來建立應用程式。 在 Visual Web Developer 中，頂端有一個工具列，顯示可供您使用的各種選項。 另外還有一個功能表，提供另一種在 IDE 中執行工作的方式。 (例如，您可以使用功能表，然後選取 [檔案>新專案]。)

Visual Web Developer 2010 Express 開始使用的螢幕擷取畫面。

建立您的第一個應用程式

您可以使用 Visual Basic 或 Visual C# 作為程式設計語言來建立應用程式。 選取左側的 [Visual C#]，然後選取 [ASP.NET MVC 3 Web 應用程式]。 將您的專案命名為 「MvcMovie」，然後按一下 [ 確定]。 (如果您想要 Visual Basic，請切換至本教學課程的 Visual Basic 版本 。)

使用 Visual Basic 或 Visual C Sharp 作為程式設計語言來建立第一個應用程式的 [新增專案] 螢幕擷取畫面。

在 [ 新增 ASP.NET MVC 3 專案 ] 對話方塊中，選取 [ 網際網路應用程式]。 核取 [使用 HTML5 標記 ]，並將 Razor 保留為預設檢視引擎。

新 A S P 的螢幕擷取畫面。[N E T M V C 3 專案] 對話方塊，可選取 [網際網路應用程式]。

按一下 [確定]。 Visual Web Developer 使用您剛才建立之 ASP.NET MVC 專案的預設範本，因此您現在沒有執行任何動作！ 這是簡單的「Hello World！」專案，這是啟動應用程式的好位置。

Visual Web Developer 的螢幕擷取畫面，其中使用 A S P 的預設範本。您建立的 N E T M V C 專案。

從 [偵錯] 功能表中，選取 [開始偵錯]。

[偵錯] 功能表的螢幕擷取畫面，以選取 [開始偵錯]。

請注意，開始偵錯的鍵盤快速鍵是 F5。

F5 會導致 Visual Web Developer 啟動開發網頁伺服器並執行 Web 應用程式。 Visual Web 開發人員接著會啟動瀏覽器，並開啟應用程式的首頁。 請注意，瀏覽器的網址列會顯示 localhost ，而不是 類似 example.com 。 這是因為 localhost 一律指向您自己的本機電腦，在此案例中是執行您剛才建置的應用程式。 當 Visual Web 開發人員執行 Web 專案時，會針對網頁伺服器使用隨機埠。 在下圖中，隨機埠號碼為 43246。 當您執行應用程式時，可能會看到不同的埠號碼。

Visual Web Developer 啟動瀏覽器並開啟應用程式首頁的螢幕擷取畫面。

現成可用的預設範本可讓您流覽兩個頁面和基本登入頁面。 下一個步驟是變更此應用程式的運作方式，並稍微瞭解程式中 ASP.NET MVC。 關閉瀏覽器，讓我們變更一些程式碼。

下一步