共用方式為


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

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

本教學課程會示範如何:

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

必要條件

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

建立專案

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

  1. 在 [開始] 視窗中,選取 [建立新專案]

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

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

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

    Screenshot that shows the ASP.NET Core Web App project template highlighted in the New Project dialog box in Visual Studio.

    注意

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

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

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

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

    Screenshot shows the dot NET Core cross-platform development workload in the Visual Studio Installer.

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

    返回此「建立專案」程式中的步驟 2。

  3. 在 [設定新專案] 視窗中,於 [專案名稱] 欄位中輸入 MyCoreApp。 然後選取下一步

    Screenshot that shows the Configure your new project window in Visual Studio with MyCoreApp entered in the Project name field.

  4. 在 [其他資訊] 視窗中,確認 .NET Core 3.1 出現在 [目標 Framework] 欄位中。

    在此視窗中,您可以啟用 Docker 支援並新增驗證支援。 [驗證類型] 的下拉式功能表有下列四個選項:

    • :無驗證。
    • 個別帳戶:這些驗證會儲存在本機或 Azure 資料庫中。
    • Microsoft 身分識別平台:此選項使用 Microsoft Entra ID 或 Microsoft 365 進行驗證。
    • Windows:適用於內部網路應用程式。

    將 [啟用 Docker] 方塊維持在取消核取的狀態,然後選取 [無] 作為 [驗證類型]。

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET Core 3.1.

  5. 選取 建立

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

  1. 在 [開始] 視窗中,選取 [建立新專案]

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

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

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

    Screenshot that shows the ASP.NET Core Web App project template selected and highlighted on the Create a new project page.

    注意

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

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

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

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

    Screenshot shows the ASP.NET and web development workload in the Visual Studio Installer.

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

    返回此「建立專案」程式中的步驟 2。

  3. 在 [設定新專案] 視窗中,於 [專案名稱] 欄位中輸入 MyCoreApp。 然後選取下一步

    Screenshot that shows the Configure your new project window in Visual Studio with MyCoreApp entered in the Project name field.

  4. 在 [ 其他資訊] 視窗中,確認 .NET 8.0 出現在 [目標 Framework] 字段中。

    在此視窗中,您可以啟用 Docker 支援並新增驗證支援。 [驗證類型] 的下拉式功能表有下列四個選項:

    • :無驗證。
    • 個別帳戶:這些驗證會儲存在本機或 Azure 資料庫中。
    • Microsoft 身分識別平台:此選項使用 Microsoft Entra ID 或 Microsoft 365 進行驗證。
    • Windows:適用於內部網路應用程式。

    將 [啟用 Docker] 方塊維持在取消核取的狀態,然後選取 [無] 作為 [驗證類型]。

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET 8.0.

  5. 選取 建立

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

關於方案

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

方案導覽

  1. 項目範本會建立具有名為 MyCoreApp 之單一 ASP.NET Core 專案的解決方案。 選取 [方案總管] 索引標籤以檢視其內容。

    Screenshot shows the MyCoreApp project selected in the Solution Explorer in Visual Studio.

  2. 展開 [頁面] 資料夾。

    Screenshot shows the contents of the Pages folder in the the Solution Explorer in Visual Studio..

  3. 選取 Index.cshtml 檔案,然後在程式代碼編輯器中檢視檔案。

    Screenshot shows the Index dot c s h t m l file open in the Visual Studio code editor.

  4. 每個 .cshtml 檔案具有相關聯的程式碼檔案。 若要在編輯器中開啟程式碼檔案,請在 [方案總管] 中展開 Index.cshtml 節點,然後選取 [Index.cshtml.cs] 檔案。

    Screenshot shows Index dot c s h t m l file selected in the Solution Explorer in Visual Studio.

  5. 在程式碼編輯器中檢視 Index.cshtml.cs 檔案。

    Screenshot shows the Index dot c s h t m l dot c s file open in the Visual Studio code editor.

  6. 專案包含 wwwroot 資料夾,這是網站的根目錄。 展開資料夾可檢視其內容。

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

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

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

  7. 展開 appsettings.json 檔案以檢視 appsettings.Development.json 檔案。

    Screenshot shows appsettings dot j son selected and expanded in the Solution Explorer in Visual Studio.

執行、偵錯及進行變更

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

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    注意

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

    您也可能會收到訊息,詢問您是否要接受 IIS SSL Express 憑證。 若要在網頁瀏覽器中檢視程式碼,請選取 [是],如果您收到後續的安全性警告訊息,請再次選取 [是]

  2. Visual Studio 會啟動瀏覽器視窗。 您應該會在功能表列中看到 [首頁] 和 [隱私權] 頁面。

  3. 從功能表列選取 [隱私權]。 瀏覽器中的 [隱私權] 頁面會轉譯在 Privacy.cshtml 檔案中設定的文字。

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

  4. 返回 Visual Studio,然後按 Shift+F5 以停止偵錯。 此動作會關閉瀏覽器視窗中的專案。

  5. 在 Visual Studio 中,開啟 [Privacy.cshtml] 以進行編輯。 接著,刪除使用此頁面詳細說明網站的隱私權原則句子,並將其取代為 截至 @ViewData["TimeStamp"] 止,此頁面尚在建置中

    Screenshot shows the Privacy dot c s h t m l file open in the Visual Studio code editor with the updated text.

  6. 現在,讓我們進行程式碼變更。 選取 [Privacy.cshtml.cs]。 接著,使用下列快速鍵清除檔案頂端的 using 指示詞:

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

    Screenshot shows the Privacy dot c s h t m l file in the Visual Studio code editor with the Quick Actions tooltip exposed for a greyed out using directive.

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

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

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

  7. 接下來,在 OnGet() 方法中,將主體變更為下列程式碼:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToShortDateString();
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. 請注意,波浪底線會出現在 DateTime 下。 波浪底線隨即出現,因為此類型不在範圍內。

    Screenshot shows an error mark, in the form of a wavy underline, for DateTime in the Visual Studio code editor.

    開啟 [錯誤清單] 工具列,以查看該處所列的相同錯誤 如果您看不到 [錯誤清單] 工具列,請從頂端功能表列中移至 [檢視]>[錯誤清單]

    Screenshot shows the Error List toolbar in Visual Studio with DateTime listed.

  9. 讓我們修正此錯誤。 在程式碼編輯器中,將游標放在包含錯誤的任一行上,然後選取左邊界的快速動作燈泡。 接著,從下拉式功能表中,選取 [using System;],以將此指示詞新增至檔案頂端並解決錯誤。

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on using System.

  10. F5,在網頁瀏覽器中開啟您的專案。

  11. 在網站頂端,選取 [隱私權] 來檢視您所做的變更。

    Screenshot showing the updated Privacy page that includes the changes you made.

  12. 關閉網頁瀏覽器,按 Shift+F5 以停止偵錯。

變更首頁

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

    Screenshot shows Index dot c s h t m l selected under the Pages node in the Solution Explorer.

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

     Screenshot shows the Home page for the web app in the browser window.

    在程式代碼編輯器中,您會看到出現在 [首頁] 頁面上之文字的 HTML 程式代碼。

    Screenshot shows the Index dot c s h t m l file for the Home page in the Visual Studio code editor.

  2. Welcome \(歡迎\) 文字取代為 Hello World!

    Screenshot shows the Index dot c s h t m l file in the Visual Studio code editor with the Welcome text changed to Hello World!.

  3. 選取 [IIS Express] 或按 Ctrl+F5 執行應用程式,並在網頁瀏覽器中開啟它。

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. 在網頁瀏覽器中,您會在 [首頁 ] 頁面上看到新的變更。

    Screenshot shows the Home page for the web app in the browser window. The updated text says Hello World!

  5. 關閉網頁瀏覽器,按 Shift+F5 以停止偵錯,並儲存專案。 您現在可以關閉 Visual Studio。

方案導覽

  1. 項目範本會建立具有名為 MyCoreApp 之單一 ASP.NET Core 專案的解決方案。 選取 [方案總管] 索引標籤以檢視其內容。

    Screenshot shows the MyCoreApp project selected and its content in the Solution Explorer in Visual Studio.

  2. 展開 [頁面] 資料夾。

    Screenshot shows the contents of the Pages folder in the Solution Explorer.

  3. 選取 [Index.cshtml] 檔案,然後在程式碼編輯器中檢視。

    Screenshot shows the Index.cshtml file open in the Visual Studio Code editor.

  4. 每個 .cshtml 檔案具有相關聯的程式碼檔案。 若要在編輯器中開啟程式碼檔案,請在 [方案總管] 中展開 Index.cshtml 節點,然後選取 [Index.cshtml.cs] 檔案。

    Screenshot shows Index.cshtml file selected in the Solution Explorer in Visual Studio.

  5. 在程式碼編輯器中檢視 Index.cshtml.cs 檔案。

    Screenshot shows the Index.cshtml.cs file open in the Visual Studio Code editor.

  6. 專案包含 wwwroot 資料夾,這是網站的根目錄。 展開資料夾可檢視其內容。

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

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

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

    Screenshot shows appsettings.json selected and expanded, which exposes appsettings.Development.json, in the Solution Explorer in Visual Studio.

執行、偵錯及進行變更

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

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    注意

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

    您也可能會收到訊息,詢問您是否要接受 IIS SSL Express 憑證。 若要在網頁瀏覽器中檢視程式碼,請選取 [是],如果您收到後續的安全性警告訊息,請再次選取 [是]

  2. Visual Studio 會啟動瀏覽器視窗。 您應該會在功能表列中看到 [首頁] 和 [隱私權] 頁面。

  3. 從功能表列選取 [隱私權]。 瀏覽器中的 [隱私權] 頁面會轉譯在 Privacy.cshtml 檔案中設定的文字。

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

  4. 返回 Visual Studio,然後按 Shift+F5 以停止偵錯。 此動作會關閉瀏覽器視窗中的專案。

  5. 在 Visual Studio 中,開啟 [Privacy.cshtml] 以進行編輯。 接著,刪除使用此頁面詳細說明網站的隱私權原則句子,並將其取代為 截至 @ViewData["TimeStamp"] 止,此頁面尚在建置中

    Screenshot shows the Privacy.cshtml file open in the Visual Studio Code editor with the updated text.

  6. 現在,讓我們進行程式碼變更。 選取 [Privacy.cshtml.cs]。 然後,選取下列快速鍵清除檔案頂端的 using 指示詞:

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

    Screenshot shows the Privacy.cshtml file in the Visual Studio Code editor with the Quick Actions tooltip open and Preview changes highlighted.

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

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

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

  7. 接下來,使用 DateTime.ToString 方法,為您的文化特性或區域設定格式的目前日期建立字串。

    • 該方法的第一個引數指定應如何顯示日期。 此範例會使用格式指定名稱 (d),指出簡短日期格式。
    • 第二個引數是 CultureInfo 物件,用以指定日的文化特性 (Culture) 或區域。 第二個引數決定日期中任何字組的語言,以及所使用的分隔符號類型。

    OnGet() 方法的主體變更為下列程式碼:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. 請注意,下列 using 指示詞會自動新增至檔案頂端:

    using System.Globalization;
    

    System.Globalization 包含 CultureInfo 類別。

  9. F5,在網頁瀏覽器中開啟您的專案。

  10. 在網站頂端,選取 [隱私權] 來檢視您所做的變更。

    Screenshot showing the Privacy page of the MyCoreApp that includes the changes made to add the date.

  11. 關閉網頁瀏覽器,按 Shift+F5 以停止偵錯。

變更首頁

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

    Screenshot shows Index.cshtml selected under the Pages node in the Solution Explorer.

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

    Screenshot shows the Home page for the web app in the browser window.

    在程式代碼編輯器中,您會看到出現在 [首頁] 頁面上之文字的 HTML 程式代碼。

    Screenshot shows the Index.cshtml file for the Home page in the Visual Studio Code editor.

  2. Welcome \(歡迎\) 文字取代為 Hello World!

    Screenshot shows the Index.cshtml file in the Visual Studio Code editor with the 'Welcome' text changed to 'Hello World!'.

  3. 選取 [IIS Express] 或按 Ctrl+F5 執行應用程式,並在網頁瀏覽器中開啟它。

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. 在網頁瀏覽器中,您會在 [首頁 ] 頁面上看到新的變更。

    Screenshot shows the Home page for the web app in the browser window. The updated text says 'Hello World!'

  5. 關閉網頁瀏覽器,按 Shift+F5 以停止偵錯,並儲存專案。 您現在可以關閉 Visual Studio。

下一步

恭喜您完成此教學課程! 希望您在學習 C#、ASP.NET Core 和 Visual Studio 整合式開發環境時樂於其中。 若要深入了解如何使用 C# 和 ASP.NET 建立 Web 應用程式或網站,請繼續進行下列教學課程:

或者,了解如何使用 Docker 將 Web 應用程式容器化:

另請參閱

使用 Visual Studio 將 Web 應用程式發行到 Azure App Service