教學課程：Visual Studio 中的 C# 和 ASP.NET Core 使用者入門

文章
01/13/2024

在本教學課程中，使用 ASP.NET Core 進行 C# 開發，您會在 Visual Studio 中建立 C# ASP.NET Core Web 應用程式。

本教學課程會示範如何：

建立 Visual Studio 專案
建立 C# ASP.NET Core Web 應用程式
變更 Web 應用程式
探索整合式開發環境功能
執行 Web 應用程式

必要條件

您需要 Visual Studio 才能完成本教學課程。如需免費版本，請造訪 Visual Studio 下載頁面。

如需升級至最新 Visual Studio 版本的詳細資訊，請參閱 Visual Studio 更新。
若要自訂 Visual Studio 體驗，請參閱個人化 Visual Studio 整合式開發環境和編輯器。

建立專案

首先，您會建立 ASP.NET Core 專案。項目類型隨附建置功能完整的網站所需的所有範本檔案。

在 [開始] 視窗中，選取 [建立新專案]。
在 [建立新專案] 視窗中，從 [語言] 清單中選取 [C#]。接著，從平台清單中選取 [Windows]，然後從專案類型清單中選取 [Web]。

套用語言、平台和專案類型篩選之後，請選取 [ASP.NET Core Web 應用程式] 範本，然後選取 [下一步]。

注意

如果您沒有看到 [ASP.NET Core Web 應用程式] 範本，可以從 [建立新專案] 視窗加以安裝。

在 [找不到您要尋找的專案？] 訊息的範本清單底部，選取 [ 安裝更多工具和功能 ] 連結。

在 Visual Studio 安裝程式中，選取 [ASP.NET 和 Web 開發]。

在 Visual Studio 安裝程式中選取 [修改]。系統可能會提示您儲存工作。選取 [ 繼續] 以安裝工作負載。

返回此「建立專案」程式中的步驟 2。
在 [設定新專案] 視窗中，於 [專案名稱] 欄位中輸入 MyCoreApp。然後選取下一步。
在 [其他資訊] 視窗中，確認 .NET Core 3.1 出現在 [目標 Framework] 欄位中。

在此視窗中，您可以啟用 Docker 支援並新增驗證支援。 [驗證類型] 的下拉式功能表有下列四個選項：
- 無：無驗證。
- 個別帳戶：這些驗證會儲存在本機或 Azure 資料庫中。
- Microsoft 身分識別平台：此選項使用 Microsoft Entra ID 或 Microsoft 365 進行驗證。
- Windows：適用於內部網路應用程式。
將 [啟用 Docker] 方塊維持在取消核取的狀態，然後選取 [無] 作為 [驗證類型]。
選取建立。

Visual Studio 會隨即開啟您的新專案。

在 [開始] 視窗中，選取 [建立新專案]。
在 [建立新專案] 視窗中，從 [語言] 清單中選取 [C#]。接著，從平台清單中選取 [Windows]，然後從專案類型清單中選取 [Web]。

套用語言、平台和專案類型篩選之後，請選取 [ASP.NET Core Web 應用程式] 範本，然後選取 [下一步]。

注意

如果您沒有看到 [ASP.NET Core Web 應用程式] 範本，可以從 [建立新專案] 視窗加以安裝。

在 [找不到您要尋找的專案？] 訊息的範本清單底部，選取 [ 安裝更多工具和功能 ] 連結。

在 Visual Studio 安裝程式中，選取 ASP.NET 和 Web 開發工作負載。

在 Visual Studio 安裝程式中選取 [修改]。系統可能會提示您儲存工作。選取 [ 繼續] 以安裝工作負載。

返回此「建立專案」程式中的步驟 2。
在 [設定新專案] 視窗中，於 [專案名稱] 欄位中輸入 MyCoreApp。然後選取下一步。
在 [ 其他資訊] 視窗中，確認 .NET 8.0 出現在 [目標 Framework] 字段中。

在此視窗中，您可以啟用 Docker 支援並新增驗證支援。 [驗證類型] 的下拉式功能表有下列四個選項：
- 無：無驗證。
- 個別帳戶：這些驗證會儲存在本機或 Azure 資料庫中。
- Microsoft 身分識別平台：此選項使用 Microsoft Entra ID 或 Microsoft 365 進行驗證。
- Windows：適用於內部網路應用程式。
將 [啟用 Docker] 方塊維持在取消核取的狀態，然後選取 [無] 作為 [驗證類型]。
選取建立。

Visual Studio 會隨即開啟您的新專案。

關於方案

此方案遵循 Razor 頁面設計模式。它和 Model-View-Controller (MVC) 設計模式的不同在於它簡化成 Razor 頁面本身即包含模型和控制器程式碼。

方案導覽

項目範本會建立具有名為 MyCoreApp 之單一 ASP.NET Core 專案的解決方案。選取 [方案總管] 索引標籤以檢視其內容。
展開 [頁面] 資料夾。
選取 Index.cshtml 檔案，然後在程式代碼編輯器中檢視檔案。
每個 .cshtml 檔案具有相關聯的程式碼檔案。若要在編輯器中開啟程式碼檔案，請在 [方案總管] 中展開 Index.cshtml 節點，然後選取 [Index.cshtml.cs] 檔案。
在程式碼編輯器中檢視 Index.cshtml.cs 檔案。
專案包含 wwwroot 資料夾，這是網站的根目錄。展開資料夾可檢視其內容。

您可以將靜態網站內容，例如 CSS、影像和 JavaScript 連結庫直接放在您想要的路徑中。

專案也包含在執行階段管理 Web 應用程式的組態檔。預設應用程式設定是儲存在 appsettings.json 中。不過，您可以使用 appsettings.Development.json來覆寫這些設定。
展開 appsettings.json 檔案以檢視 appsettings.Development.json 檔案。

執行、偵錯及進行變更

在工具列中 ，選取 [IIS Express] 按鈕，以偵錯模式建置並執行應用程式。或者，按下 F5，或移至功能表列中的 [偵錯]>[開始偵錯]。

注意

如果您收到的錯誤訊息指出「無法連線到 Web 伺服器 'IIS Express'」，請關閉 Visual Studio，並以系統管理員的身分重新啟動程式。您可以從 [開始] 功能表以滑鼠右鍵按兩下Visual Studio 圖示，然後從操作選單選取 [以系統管理員 身分執行] 選項，以執行這項工作。

您也可能會收到訊息，詢問您是否要接受 IIS SSL Express 憑證。若要在網頁瀏覽器中檢視程式碼，請選取 [是]，如果您收到後續的安全性警告訊息，請再次選取 [是]。
Visual Studio 會啟動瀏覽器視窗。您應該會在功能表列中看到 [首頁] 和 [隱私權] 頁面。
從功能表列選取 [隱私權]。瀏覽器中的 [隱私權] 頁面會轉譯在 Privacy.cshtml 檔案中設定的文字。
返回 Visual Studio，然後按 Shift+F5 以停止偵錯。此動作會關閉瀏覽器視窗中的專案。
在 Visual Studio 中，開啟 [Privacy.cshtml] 以進行編輯。接著，刪除使用此頁面詳細說明網站的隱私權原則句子，並將其取代為 截至 @ViewData["TimeStamp"] 止，此頁面尚在建置中。
現在，讓我們進行程式碼變更。選取 [Privacy.cshtml.cs]。接著，使用下列快速鍵清除檔案頂端的 using 指示詞：

將滑鼠經過或選取灰色的 using 指示詞。快速動作燈泡會出現在插入號下方或左邊界。選取燈泡，然後選取 [移除不必要的 Using]。

現在，選取 [ 預覽變更 ] 以查看哪些變更。

選取套用。 Visual Studio 會將不必要的 using 指示詞從檔案中刪除。

接下來，在 OnGet() 方法中，將主體變更為下列程式碼：

public void OnGet()
{
   string dateTime = DateTime.Now.ToShortDateString();
   ViewData["TimeStamp"] = dateTime;
}

請注意，波浪底線會出現在 DateTime 下。波浪底線隨即出現，因為此類型不在範圍內。

開啟 [錯誤清單] 工具列，以查看該處所列的相同錯誤如果您看不到 [錯誤清單] 工具列，請從頂端功能表列中移至 [檢視]>[錯誤清單]。
讓我們修正此錯誤。在程式碼編輯器中，將游標放在包含錯誤的任一行上，然後選取左邊界的快速動作燈泡。接著，從下拉式功能表中，選取 [using System;]，以將此指示詞新增至檔案頂端並解決錯誤。
按 F5，在網頁瀏覽器中開啟您的專案。
在網站頂端，選取 [隱私權] 來檢視您所做的變更。
關閉網頁瀏覽器，按 Shift+F5 以停止偵錯。

變更首頁

在 [方案總管] 中，展開 [頁面] 資料夾，然後選取 [Index.cshtml]。

Index.cshtml 檔案會對應至 Web 應用程式中的 [首頁] 頁面，該頁面會在網頁瀏覽器中執行。

在程式代碼編輯器中，您會看到出現在 [首頁] 頁面上之文字的 HTML 程式代碼。
將 Welcome \(歡迎\) 文字取代為 Hello World!
選取 [IIS Express] 或按 Ctrl+F5 執行應用程式，並在網頁瀏覽器中開啟它。
在網頁瀏覽器中，您會在 [首頁 ] 頁面上看到新的變更。
關閉網頁瀏覽器，按 Shift+F5 以停止偵錯，並儲存專案。您現在可以關閉 Visual Studio。

方案導覽

項目範本會建立具有名為 MyCoreApp 之單一 ASP.NET Core 專案的解決方案。選取 [方案總管] 索引標籤以檢視其內容。
展開 [頁面] 資料夾。
選取 [Index.cshtml] 檔案，然後在程式碼編輯器中檢視。
每個 .cshtml 檔案具有相關聯的程式碼檔案。若要在編輯器中開啟程式碼檔案，請在 [方案總管] 中展開 Index.cshtml 節點，然後選取 [Index.cshtml.cs] 檔案。
在程式碼編輯器中檢視 Index.cshtml.cs 檔案。
專案包含 wwwroot 資料夾，這是網站的根目錄。展開資料夾可檢視其內容。

您可以將靜態網站內容，例如 CSS、影像和 JavaScript 連結庫直接放在您想要的路徑中。
專案也包含在執行階段管理 Web 應用程式的組態檔。預設應用程式設定是儲存在 appsettings.json 中。不過，您可以使用 appsettings.Development.json來覆寫這些設定。展開 appsettings.json 檔案以檢視 appsettings.Development.json 檔案。

執行、偵錯及進行變更

在工具列中 ，選取 [IIS Express] 按鈕，以偵錯模式建置並執行應用程式。或者，按下 F5，或移至功能表列中的 [偵錯]>[開始偵錯]。

注意

如果您收到的錯誤訊息指出「無法連線到 Web 伺服器 'IIS Express'」，請關閉 Visual Studio，並以系統管理員的身分重新啟動程式。您可以從 [開始] 功能表以滑鼠右鍵按兩下Visual Studio 圖示，然後從操作選單選取 [以系統管理員 身分執行] 選項，以執行這項工作。

您也可能會收到訊息，詢問您是否要接受 IIS SSL Express 憑證。若要在網頁瀏覽器中檢視程式碼，請選取 [是]，如果您收到後續的安全性警告訊息，請再次選取 [是]。
Visual Studio 會啟動瀏覽器視窗。您應該會在功能表列中看到 [首頁] 和 [隱私權] 頁面。
從功能表列選取 [隱私權]。瀏覽器中的 [隱私權] 頁面會轉譯在 Privacy.cshtml 檔案中設定的文字。
返回 Visual Studio，然後按 Shift+F5 以停止偵錯。此動作會關閉瀏覽器視窗中的專案。
在 Visual Studio 中，開啟 [Privacy.cshtml] 以進行編輯。接著，刪除使用此頁面詳細說明網站的隱私權原則句子，並將其取代為 截至 @ViewData["TimeStamp"] 止，此頁面尚在建置中。
現在，讓我們進行程式碼變更。選取 [Privacy.cshtml.cs]。然後，選取下列快速鍵清除檔案頂端的 using 指示詞：

將滑鼠經過或選取灰色的 using 指示詞。快速動作燈泡會出現在插入號下方或左邊界。選取燈泡，然後選取 [移除不必要的 Using] 旁的展開箭號。

現在，選取 [ 預覽變更 ] 以查看哪些變更。

選取套用。 Visual Studio 會將不必要的 using 指示詞從檔案中刪除。
接下來，使用 DateTime.ToString 方法，為您的文化特性或區域設定格式的目前日期建立字串。
- 該方法的第一個引數指定應如何顯示日期。此範例會使用格式指定名稱 (d)，指出簡短日期格式。
- 第二個引數是 CultureInfo 物件，用以指定日的文化特性 (Culture) 或區域。第二個引數決定日期中任何字組的語言，以及所使用的分隔符號類型。
將 OnGet() 方法的主體變更為下列程式碼：
```
public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}
```
請注意，下列 using 指示詞會自動新增至檔案頂端：
```
using System.Globalization;
```
System.Globalization 包含 CultureInfo 類別。
按 F5，在網頁瀏覽器中開啟您的專案。
在網站頂端，選取 [隱私權] 來檢視您所做的變更。
關閉網頁瀏覽器，按 Shift+F5 以停止偵錯。

變更首頁

在 [方案總管] 中，展開 [頁面] 資料夾，然後選取 [Index.cshtml]。

Index.cshtml 檔案會對應至 Web 應用程式中的 [首頁] 頁面，該頁面會在網頁瀏覽器中執行。

在程式代碼編輯器中，您會看到出現在 [首頁] 頁面上之文字的 HTML 程式代碼。
將 Welcome \(歡迎\) 文字取代為 Hello World!
選取 [IIS Express] 或按 Ctrl+F5 執行應用程式，並在網頁瀏覽器中開啟它。
在網頁瀏覽器中，您會在 [首頁 ] 頁面上看到新的變更。
關閉網頁瀏覽器，按 Shift+F5 以停止偵錯，並儲存專案。您現在可以關閉 Visual Studio。