ASP.NET MVC 5 入門指南

由 Rick Anderson

注意

本教學課程的更新版本可在此取得，它使用最新版的Visual Studio。 新的教學課程使用 ASP.NET Core MVC，相比於本教學課程提供了許多改良。

本教學課程可讓您了解 ASP.NET Core MVC 與控制器和檢視。 Razor 頁面是 ASP.NET Core 中的新替代方案，它是以頁面為基礎的程式設計模型，可讓 Web UI 的建立更容易且更有效率。 我們建議您在嘗試 MVC 版本之前，先試試 Razor Pages 教學。 Razor 頁面教學：

• 比較容易理解。
• 涵蓋更多功能。
• 是開發新應用程式的建議方法。

此教學課程教導您使用 Visual Studio 2017 建立 ASP.NET MVC 5 Web 應用程式的基本知識。 本教學課程的最終原始碼位於 GitHub 上。

本教程由 Scott Guthrie (twitter @scottgu)、Scott Hanselman (twitter: @shanselman) 和 Rick Anderson (@RickAndMSFT) 編寫

您需要一個 Azure 帳戶才能將此應用程式部署到 Azure：

• 您可以免費開設 Azure 帳戶 - 您將獲得可用於試用付費 Azure 服務的點數，即使點數用完後，您也可以保留該帳戶並使用免費的 Azure 服務。
• 您可以啟動 MSDN 訂閱者權益。因此，您的 MSDN 訂閱每月都會為您提供用於 Azure 付費服務的點數。

開始

開始安裝 Visual Studio 2017。 然後，開啟 Visual Studio。

Visual Studio 是 IDE，整合式開發環境。 如同使用 Microsoft Word 撰寫文件一樣，您可使用 IDE 建立應用程式。 在 Visual Studio 中，底部有一個清單，其中顯示可供您使用的各種選項。 還有一個功能表，提供另一種在 IDE 中執行工作的方式。 例如，您可以使用功能表列並選取 [檔案][新專案]，而不是在 [開始]頁面上選取 [新專案]。

螢幕擷取畫面顯示 Visual Studio 的開始頁面，並用紅色圈出「建立新專案」。

建立第一個應用程式

在 [開始頁面] 上，選取 [新專案]。 在 [新專案] 對話方塊中，選取左側的 [Visual C#] 類別，然後選取 [Web]，接著選取 [ASP.NET Web 應用程式 (.NET 架構)] 專案範本。 將專案命名為「MvcMovie」，然後選擇 [確定]。

顯示 [新專案] 視窗的螢幕擷取畫面，已選取 Web 和 ASP.NET Web 應用程式 .NET Framework。

在 [新 ASP.NET Web 應用程式] 對話方塊中，選擇 [MVC]，然後選擇 [確定]。

Visual Studio 已針對您剛建立的 ASP.NET MVC 專案套用預設範本，因此您不用採取任何動作，就有一個可運作的應用程式！ 這是簡單的「Hello World！」專案，很適合您開始建立應用程式。

顯示開啟至概觀頁面的 MVC 電影視窗的螢幕擷取畫面。

按 F5 開始偵錯作業。 按 F5 時，Visual Studio 會啟動 IIS Express 並執行你的網路應用程式。 Visual Studio 接著會啟動瀏覽器，並開啟應用程式的首頁。 請注意，瀏覽器的位址列顯示的是 localhost:port# 而不是 example.com。 這是因為 localhost 一律指向您的本機電腦，而在本例中，它正在執行您剛建置的應用程式。 當 Visual Studio 執行 Web 專案時，會為網頁伺服器使用隨機連接埠。 在下圖中，通訊埠編號為 1234。 當您執行應用程式時，可能會看到不同的通訊埠編號。

此螢幕擷取畫面顯示了 ASP.NET 首頁。

這個預設範本一拿到手，就可以為您提供 Home、Contact 和 About 頁面。 下圖不會顯示 [首頁]、[關於] 和 [連絡人] 連結。 根據瀏覽器視窗的大小，您可能需要按一下瀏覽圖示來查看這些連結。

在較小的顯示視窗中，ASP.NET 主頁的螢幕截圖。導覽功能表的三條線以紅色圈起來。

應用程式也支援註冊和登入。 下一步您將瞭解如何變更此應用程式的運作方式，我們也會稍微簡介 ASP.NET MVC。 關閉 ASP.NET MVC 應用程式，讓我們變更一些程式碼。

如需目前教學課程的清單，請參閱 MVC 推薦文章。

下一步