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

發行項
05/08/2023

適用于：Visual StudioVisual Studio for MacVisual Studio Code

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

此教學課程將為您示範如何：

建立 Visual Studio 專案
建立 C# ASP.NET Core Web 應用程式
對 Web 應用程式進行變更
探索 IDE 功能
執行 Web 應用程式

必要條件

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

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

建立專案

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

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

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

注意

如果您沒有看到[ASP.NET Core Web 應用程式] 範本，您可以從 [建立新專案] 視窗加以安裝。在 [找不到您要尋找的專案？] 訊息中，找到範本清單底部的 [ 安裝更多工具和功能 ] 連結。

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

在Visual Studio 安裝程式中選取[修改]。系統可能會提示您儲存您的工作。接下來，選取 [繼續 ] 以安裝工作負載。
在 [設定新專案] 視窗中，于 [專案名稱] 欄位中輸入MyCoreApp。然後，選取 [下一步] 。
在 [ 其他資訊 ] 視窗中，確認 .NET Core 3.1 出現在 [ 目標 Framework ] 欄位中。在此視窗中，您可以啟用 Docker 支援，並新增驗證支援。 驗證類型的下拉式功能表有下列四個選項：
- None：不需要驗證。
- 個別帳戶。這些驗證會儲存在本機或以 Azure 為基礎的資料庫中。
- Microsoft 身分識別平臺。此選項使用 Active Directory、Azure AD 或 Microsoft 365 進行驗證。
- Windows。適合內部網路應用程式。
取消核取 [ 啟用 Docker] 方塊，然後針對 [驗證類型] 選取 [ 無 ]。接下來，選取 [建立]。

Visual Studio 會開啟您的新專案。

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

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

注意

如果您沒有看到[ASP.NET Core Web 應用程式] 範本，您可以從 [建立新專案] 視窗加以安裝。在 [找不到您要尋找的專案？] 訊息中，找到範本清單底部的 [ 安裝更多工具和功能 ] 連結。

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

在Visual Studio 安裝程式中選取[修改]。系統可能會提示您儲存您的工作。接下來，選取 [繼續 ] 以安裝工作負載。
在 [設定新專案] 視窗中，于 [專案名稱] 欄位中輸入MyCoreApp。然後，選取 [下一步] 。
在 [ 其他資訊 ] 視窗中，確認 .NET 6.0 出現在 [目標 Framework ] 欄位中。在此視窗中，您可以啟用 Docker 支援，並新增驗證支援。 驗證類型的下拉式功能表有下列四個選項：
- None：不需要驗證。
- 個別帳戶。這些驗證會儲存在本機或以 Azure 為基礎的資料庫中。
- Microsoft 身分識別平臺。此選項使用 Active Directory、Azure AD 或 Microsoft 365 進行驗證。
- Windows。適合內部網路應用程式。
取消核取 [ 啟用 Docker] 方塊，然後針對 [驗證類型] 選取 [ 無 ]。接下來，選取 [建立]。

Visual Studio 會開啟您的新專案。

關於方案

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

方案導覽

專案範本會建立具有單一 ASP.NET Core 專案 (名為 MyCoreApp) 的方案。選取[方案總管]索引標籤以檢視其內容。
展開 Pages 資料夾。
選取 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鍵，或從功能表欄移至 [>偵錯開始偵錯]。

注意

如果您收到錯誤訊息，指出無法連線到網頁伺服器 '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 指示詞。快速動作燈泡會出現在插入號或左邊界正下方。選取燈泡，然後選取 [移除不必要的使用]。

現在選取 [預覽變更 ] 以查看將變更的內容。

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

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

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

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

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

變更首頁

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

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

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

方案導覽

專案範本會建立具有單一 ASP.NET Core 專案 (名為 MyCoreApp) 的方案。選取[方案總管]索引標籤以檢視其內容。
展開 Pages 資料夾。
選取 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鍵，或從功能表欄移至 [>偵錯開始偵錯]。

注意

如果您收到錯誤訊息，指出無法連線到網頁伺服器 '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 詞。快速動作燈泡會出現在插入號下方或左邊界下方。選取燈泡，然後選取 [移除不必要的使用] 旁的展開箭號。

現在選取 [預覽變更 ] 以查看將變更的內容。

選取 [套用]。 Visual Studio 會將不必要的 using 指示詞從檔案中刪除。
接下來，使用 DateTime.ToString 方法，為文化特性或區域格式化的目前日期建立字串。
- 方法的第一個引數會指定應該如何顯示日期。本範例使用格式規範 (d) ，指出簡短日期格式。
- 第二個引數是 CultureInfo 物件，指定日期的文化特性或區域。第二個引數會決定日期中任何單字的語言，以及所使用的分隔符號類型。
將方法的 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停止偵錯。

變更首頁

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

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

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