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

發行項
07/13/2023

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

您將學到什麼

如果您需要在 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 網頁。您也可以使用 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 和 Web 開發 工作負載。

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		更新至 ASP.NET Web Pages 3 到 NuGet	包含 ()

若要使用 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 網站 (Razor) 範本。
按一下 [確定]。

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

Using IntelliSense

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

在您剛才建立的網站中，開啟 Default.cshtml 頁面。
在 <h3> 頁面標記之後，輸入 @ServerInfo. (包括點) 。請注意 IntelliSense 如何在下拉式清單中顯示協助程式的可用方法 ServerInfo 。
GetHtml從清單中選取方法，然後按 Enter。 IntelliSense 會自動填入方法。 (如同 C# 中的任何方法，您必須在 () method.) 方法完成的程式碼 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 專案中搭配 Visual Studio 使用 Razor

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) ，然後按一下 [新增]。這些產品包括用來建置 ASP.NET Razor 網站的 Visual Studio 工具。
按一下 [安裝] 來完成安裝程序。