ASP.NET MVC 4 簡介

  • 發行項

作者 ：Rick Anderson

本教學課程的更新版本可使用 Visual Studio 2013在這裡取得。 新的教學課程使用 ASP.NET MVC 5，其提供本教學課程的許多改進功能。

本教學課程將教導您使用 Microsoft Visual Studio Express 2012 或 Visual Web Developer 2010 Express Service Pack 1 建置 ASP.NET MVC 4 Web 應用程式的基本概念。 建議使用 Visual Studio 2012，您不需要安裝任何專案才能完成本教學課程。 如果您使用 Visual Studio 2010，則必須安裝下列元件。 您可以按下列連結來安裝所有連結：

如果您使用 Visual Studio 2010 而不是 Visual Web Developer 2010，請安裝 適用於 ASP.NET MVC 4 的 WPI 安裝程式 ，以及： Visual Studio 2010 必要條件

具有 C# 原始程式碼的 Visual Web Developer 專案隨附於本主題中。 下載 C# 版本。

在本教學課程中，您會在 Visual Studio 中執行應用程式。 您也可以透過因特網將應用程式部署至主機提供者，讓應用程式可供使用。 Microsoft 在 免費的 Windows Azure 試用帳戶中提供最多 10 個網站的免費 Web 裝載。 如需如何將Visual Studio Web專案部署至 Windows Azure 網站的相關信息，請參閱使用Visual Studio 建立和部署 ASP.NET 網站和 SQL Database。 該教學課程也會示範如何使用 Entity Framework Code First 移轉，將 SQL Server 資料庫部署至先前 SQL Azure) 的 Windows Azure SQL Database (。

本教學課程是由 Rick Anderson ( @RickAndMSFT ) 所撰寫。

您要建置的內容

注意

如果本教學課程可使用 Visual Studio 2013，則為更新的版本。 新的教學課程使用 ASP.NET MVC 5，其提供本教學課程的許多改進功能。

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

顯示 M V C 影片應用程式搜尋索引頁面的螢幕快照。在標題搜尋列中輸入准刪除。

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

顯示 M V C 影片應用程式編輯頁面的螢幕快照。[發行日期] 和 [價格] 兩個文字欄位會反白顯示，提示使用者輸入正確的值。

開始使用

從執行 Visual Studio Express 2012 或 Visual Web Developer 2010 Express 開始。 此系列的大部分螢幕快照都使用 Visual Studio Express 2012，但您可以使用 Visual Studio 2010/SP1、Visual Studio 2012、Visual Studio Express 2012 或 Visual Web Developer 2010 Express 完成本教學課程。 從 [開始] 頁面選取 [新增專案]。

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

顯示 [開始] 頁面 Visual Studio Express 螢幕快照。[新增專案] 選項會反白顯示。

建立您的第一個應用程式

您可以使用 Visual Basic 或 Visual C# 作為程式設計語言來建立應用程式。 選取左側的 [Visual C#]，然後選取 [ASP.NET MVC 4 Web 應用程式]。 將專案命名為 “MvcMovie”，然後按兩下 [ 確定]。

顯示 [新增專案] 視窗的螢幕快照。已選取 S P 點 NET M V C 4 Web 應用程式。

在 [ 新增 ASP.NET MVC 4 專案 ] 對話框中，選取 [因特網應用程式]。 將 Razor 保留為預設檢視引擎。

顯示 [新增 A S P 點 NET M V C 4 專案] 視窗的螢幕快照。已選取 [因特網應用程式] 範本。

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

此螢幕快照顯示已開啟的 [A P 點 NET M V C 專案主控制器 c s] 和 [方案總管] 索引標籤。

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

顯示 [S P 點 NET M V V C 項目偵錯] 下拉功能表的螢幕快照。已選取 [開始偵錯] 選項。

請注意，開始偵錯的鍵盤快捷方式是 F5。

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

顯示 M V C 影片首頁的螢幕快照。

立即提供此預設範本的 [首頁]、[聯繫人] 和 [關於] 頁面。 它也支持註冊和登入，以及 Facebook 和 Twitter 的連結。 下一個步驟是變更此應用程式的運作方式，並稍微瞭解 ASP.NET MVC。 關閉瀏覽器，讓我們變更一些程序代碼。

下一步