使用 Visual Studio 程式設計 ASP.NET Web Pages (Razor)

發行項
09/26/2024

本文說明如何使用 Visual Studio 或 Visual Web Developer Express 來程式設計 ASP.NET Web Pages (Razor) 網站。

您將學到什麼

要在 Visual Studio 版本中使用 ASP.NET Web Pages，需要安裝的項目 (如果有的話)。

如何將對 ASP.NET Web Pages 的支援新增至 Visual Web Developer 2010 Express。

如何使用 Visual Studio 中的功能來處理 ASP.NET Razor 頁面，包括 IntelliSense 和偵錯工具。

教學課程中使用的軟體版本

ASP.NET Web Pages (Razor) 3

Visual Studio 2013

WebMatrix 3

本教學課程也適用於 ASP.NET Web Pages 2、Visual Studio 2012、Visual Studio 2010 和 WebMatrix 2。

您可以使用 WebMatrix 或其他許多程式碼編輯器，對使用 Razor 語法的 ASP.NET Web pages 進行程式編輯。您也可以使用 Microsoft Visual Studio，這是一個功能完整的整合開發環境 (IDE)，可提供一組功能強大的工具，以建立許多類型的應用程式 (不僅是網站)。若要使用 ASP.NET Razor 頁面，您可以使用 Visual Studio 2017。

Visual Studio 為了程式設計 ASP.NET Razor 網頁所提供的兩項特別實用功能如下：

IntelliSense。 Visual Studio 內建的 IntelliSense 功能比 WebMatrix 中的 IntelliSense 更全面。
偵錯工具 偵錯工具可讓您在程式執行時透過停止程式、檢查變數，並逐行逐步執行程式碼，來對程式碼進行疑難排解。

Visual Studio 與不同版本的ASP.NET Web Pages 搭配使用

若要在 Visual Studio 2017 中開發 ASP.NET Web 應用程式，請安裝 ASP.NET 和網頁開發工作負載。

Visual Studio 2012 和 Visual Studio 2013 包含對 ASP.NET Web Pages 的支援。 (安裝 Visual Studio 時，會安裝支援 ASP.NET Web Pages 所需的套件。)

Visual Studio 2010 預設不包含對 ASP.NET Web Pages 的支援。若要讓 Visual Studio 2010 和 ASP.NET Web Pages 搭配使用，您必須安裝 ASP.NET MVC 套件。若要取得 ASP.NET Web Pages 2，請安裝 ASP.NET MVC 4。

下表摘要說明不同版本的 Visual Studio 中對 ASP.NET Web Pages的支援。

	Visual Studio 2010	Visual Studio 2012	Visual Studio 2013
ASP.NET Web Pages 2	安裝 ASP.NET MVC 4	(已包含)	(已包含)
ASP.NET Web Pages 3		透過 NuGet 更新至 ASP.NET Web Pages 3	(已包含)

若要使用 Visual Studio 2010，請參閱在 Visual Studio 2010 中安裝對 ASP.NET Web Pages 的支援。

從 WebMatrix 啟動 Visual Studio

如果您已在 WebMatrix 中啟動專案，而且想要切換至 Visual Studio，WebMatrix 會提供按鈕，可輕鬆地在 Visual Studio 中開啟專案。您必須在電腦上安裝 Visual Studio，才能啟用此按鈕。下圖顯示 WebMatrix 中的按鈕。

啟動 Visual Studio

當您點擊按鈕時，專案會在 Visual Studio 中開啟。您可以在 WebMatrix 和 Visual Studio 之間來回切換，不會有任何問題。如果其他環境中有任何檔案變更，且需要重新載入以取得最新變更的話，您會收到通知。

在 Visual Studio 中建立 ASP.NET Razor 網站

要在 Visual Studio 中建立 ASP.NET Razor 網站，請執行以下操作：

開啟 Visual Studio。
在檔案功能表中，點擊新網站。
在新網站對話方塊中，選取要使用的語言 (Visual C# 或 Visual Basic)。
選取 ASP.NET Web Site (Razor) 範本。
按一下 [確定]。

您的新專案已存在，並填入一些預設網頁，以協助您開始使用。

Using IntelliSense

現在您已建立網站，您可以查看 IntelliSense 在 Visual Studio 中的運作方式。

在您剛建立的網站中，開啟 Default.cshtml 頁面。
在頁面中的<h3>標籤之後，輸入@ServerInfo. (包括點)。請注意 IntelliSense 如何在下拉式清單中顯示ServerInfo協助程式的可用方法。
從清單中選取GetHtml方法，然後按 Enter。 IntelliSense 會自動填入方法。 (如同 C# 中的任何方法，您必須在()方法後面新增字元。) GetHtml方法已完成的程式碼看起來會像下列範例：
```
@ServerInfo.GetHtml()
```
按 Ctrl+F5 執行頁面。這是頁面在瀏覽器中顯示時的外觀：
關閉瀏覽器。

使用偵錯工具

在 Default.cshtml 頁面頂端，在以Page.Title開頭的行後面，新增下列程式碼行：
```
var myTime = DateTime.Now.TimeOfDay;
```
在程式碼左邊的編輯器灰色邊界中，點擊這個新行旁邊以新增斷點。斷點是一個標記，會指示偵錯工具在該時間點停止執行程式，以便您可以看到正在發生的事情。
移除對ServerInfo.GetHtml方式的呼叫，並將呼叫新增至@myTime變數的位置。此呼叫會顯示新程式碼行所傳回的目前時間值。
按 F5，以在偵錯工具中執行頁面。頁面會在您設定的斷點上停止。下圖顯示頁面在編輯器中的外觀，其斷點為黃色。
在偵錯工具列中，點擊逐步執行按鈕 (或按 F11) 來執行下一行程式碼。每次點擊此按鈕時，您都會將執行前移至下一行程式碼。
藉由將滑鼠指標懸停在變數上方或檢查顯示在區域中的值和呼叫堆疊視窗，來檢查myTime變數的值。 Visual Studio 會顯示變數的值。
當您完成檢查變數並逐步執行程式碼時，請按 F5 來繼續執行頁面，而不是在每行停止。當您完成所有程式碼逐步執行之後，瀏覽器會顯示頁面。

若要了解偵錯工具以及如何在 Visual Studio 中偵錯程式碼的詳細資訊，請參閱逐步解說：在 Visual Web Developer 中偵錯網頁。

將 ASP.NET MVC 專案中的 Razor 與 Visual Studio 搭配使用

Razor 語法也廣泛用於 ASP.NET MVC 專案中。 MVC 是一種功能強大的、模式型的方式可建構動態網站如果您的 ASP.NET Web Pages 網站變得很難維護，您可能會考慮將它轉換成 ASP.NET MVC 應用程式。如需建立 MVC 應用程式的範例，請參閱開始使用 ASP.NET MVC 5。

在 Visual Studio 2010 中安裝對 ASP.NET Web Pages 的支援

本節說明如何安裝 Visual Web Developer Express 2010 和 ASP.NET Web Pages Tools for Visual Studio。

如果您還沒有 Web Platform Installer，請從下列 URL 下載：

https://www.microsoft.com/web/downloads/platform.aspx
執行 Web Platform Installer。
點擊產品索引標籤。
搜尋 ASP.NET MVC 4 (供ASP.NET Web Pages 2 使用)，然後點擊新增]。這些產品包括 Visual Studio 工具，可用來建置 ASP.NET Razor 網站。
按一下 [安裝] 來完成安裝程序。

共用方式為