入門
目的
在 Visual Studio Code 中使用 Blazor 組建您的第一個具有 ASP.NET Core 的 Web 應用程式。
必要條件
完成時間
10 至 15 分鐘 + 下載/安裝時間
情節
建立、使用及修改簡單計數器元件。
偏好 Visual Studio 或 CLI?
您也可以視需求透過 Visual Studio 或命令列介面開始使用 Blazor。
下載並安裝
您需要安裝 .NET SDK、Visual Studio Code 和 C# 開發套件，才能建置您的第一個 .NET 應用程式。
.NET SDK (軟體開發套件) 是您使用 C# 建置及執行應用程式時所需之免費開放原始碼工具與程式庫集合。C# 是您在此教學課程中要用到的新式目標取向程式設計語言。
Visual Studio Code (VS Code) 是全世界最熱門的輕量型免費開放原始碼程式碼編輯器。您會在這裡撰寫您的 C# 程式碼。
C# 開發套件是一組強大的 VS Code 延伸模組，讓 C# 開發變得更容易。可協助您在建置應用程式時撰寫、測試及偵錯程式碼。
.NET Winget 設定檔會為您安裝 .NET 8 SDK、VS Code 及 C# 開發套件。如果您已安裝某些工具，Winget 會略過該工具的安裝步驟。
若要使用 Visual Studio Code 建置您的第一個 .NET 應用程式，請設定您的環境：
-
下載並安裝 .NET SDK:
-
下載並安裝 VS Code:
下載 VS Code
-
開啟 VS Code 並選取 VS Code 的活動列左側的 [擴充功能] 按鈕。在搜尋列中輸入 C#，選取 [C# 開發套件]，然後在 C# 開發套件延伸模組頁面選取 [安裝] 按鈕。
![VS Code 的 C# 開發套件']()
按一下下方連結即可下載檔案。
開啟您的下載資料夾，然後按兩下檔案以開始安裝。
![下載資料夾中的 Dotnet 設定檔]()
選取 [終端機或開發人員首頁安裝指示]
按兩下檔案後即會開啟終端機，您會看到 Winget 設定檔已準備好安裝 .NET 8 SDK、VS Code (若未安裝) 和 C# 開發套件。
![Dotnet sdk、vscode 和 c sharp devkit 安裝]()
閱讀並同意授權條款: 在終端機中鍵入 “y”，然後按 Enter 鍵。
注意: 您有責任了解自己選擇執行的組態設定。Microsoft 對您撰寫或匯入的設定檔概不負責。此設定可能會變更 Windows 設定、安裝軟體、變更軟體設定 (包括安全性設定)，以及代表您接受協力廠商套件和服務的使用者合約。執行此設定檔，即表示您了解並同意這些資源與設定。您安裝的所有應用程式均由程式擁有者授權。Microsoft 對協力廠商套件或服務或其授權概不負責。
![授權合約畫面]()
Winget 現在會為您安裝開始作業所需的一切!約需 5 分鐘即可完成，完成後，您就會在終端機中看到下方的輸出。
![Dotnet sdk、vscode 和 c sharp 開發套件安裝完成]()
按兩下檔案後即會開啟開發人員首頁，您會看到 Winget 設定檔已準備好安裝 .NET 8 SDK、VS Code (若未安裝) 和 C# 開發套件。
![開發人員首頁的 Dotnet sdk、vscode 和 c sharp 開發套件安裝]()
閱讀並同意授權條款: 按一下左下方的 [我同意並想要繼續]，再按一下右下方的 [設定為系統管理員]。詢問您是否允許開發人員首頁變更裝置時，請選取 [是]。
注意: 您有責任了解自己選擇執行的組態設定。Microsoft 對您撰寫或匯入的設定檔概不負責。此設定可能會變更 Windows 設定、安裝軟體、變更軟體設定 (包括安全性設定)，以及代表您接受協力廠商套件和服務的使用者合約。執行此設定檔，即表示您了解並同意這些資源與設定。您安裝的所有應用程式均由程式擁有者授權。Microsoft 對協力廠商套件或服務或其授權概不負責。
![開發人員首頁的授權合約畫面]()
開發人員首頁正在安裝開始作業所需的一切!約需 5 分鐘即可完成，完成後，您就會在視窗中看到下方的輸出。
![開發人員首頁的 Dotnet sdk、vscode 和 c sharp 開發套件安裝完成]()
檢查是否已正確安裝所有項目
環境設定完成後，請移至 Windows 任務列中的 [搜尋]，然後鍵入 Visual Studio Code。按一下應用程式以開啟 VS Code。
一旦設定您的環境後，請開啟新的 VS Code 終端。在工具列中，依序選取 [終端]，[新增終端]。
![在 Windows 搜尋列中尋找 VSCode]()
注意: 如果透過終端機開啟 VS Code，即必須啟用 [工作區信任]。
現在請移至工具列，依序選取 [終端機] 和 [新的終端機]，開啟新的終端機。
![VS Code 新終端]()
在您的終端中執行下列命令，以檢查安裝。
如果安裝成功，您應該會看到類似下列的輸出:
Terminal
Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute.
如果一切順利，請選取下方的 [繼續] 按鈕以移至下一個步驟。
發生錯誤嗎?
如果您收到 [無法將 'dotnet' 辨識為內部或外部命令] 錯誤，請確定已開啟新的 VS Code 終端。如果重新啟動 VS Code 或 重新啟動您的機器都無法解決問題，請使用 [我遇到問題] 按鈕以尋求解決問題的協助。
建立您自己的應用程式
- 按下 CTRL+SHIFT+P，在 VS Code 中開啟命令選擇區。
- 按下 CMD+SHIFT+P，在 VS Code 中開啟命令選擇區。
- 輸入 .NET: 以查看您可以使用 C# 開發套件執行的命令!
- 尋找並選取 [.NET: 新專案] 以建立新的 .NET 專案。
- 向下捲動並選取 [Blazor Web 應用程式]。
- 選擇您要儲存專案的資料夾位置。
- 收到提示時，在命令選擇區中將專案命名為
BlazorApp。按 Enter 以確認。
勾選方塊並選取 [是，我信任作者]，以啟用 [工作區信任]。
![[工作區信任] 對話方塊]()
如果您有 Visual Studio 訂閱，請登入您的帳戶。如果您沒有看到提示快顯視窗，請按一下視窗右下方 VS Code 狀態列中的 C# 圖示。
![使用 VS 訂閱登入]()
確定側邊欄中的 VS Code 總管已開啟。您會在這裡看到 BlazorApp 資料夾與方案總管。請跟著下方的影片執行動作: 摺疊 BlazorApp 資料夾、開啟方案總管、開啟 BlazorApp 專案，將方案總管拖放至較高位置。
- 摺疊 VS Code 總管中的
BlazorApp 資料夾。
- 按一下方案總管左側的箭號即可展開。
- 按一下 [方案總管]中
BlazorApp 專案左側的箭號即可展開此專案。
- 將 [方案總管] 拖放至 BlazorApp 下方。
您的專案會建立並載入 Visual Studio Code。使用 [方案總管] 查看專案的內容。
![方案總管包含為您的專案建立之資料夾和檔案的清單]()
已建立數個檔案，為您提供一個已準備執行的簡單 Blazor 應用程式。
Program.cs 是啟動伺服器以及您在其中設定應用程式服務與中介軟體之應用程式的進入點。-
在 Components 目錄中:
App.razor 是應用程式的根元件。Routes.razor 設定 Blazor 路由器。Pages 目錄會包含應用程式的一些範例網頁。
BlazorApp.csproj 會定義應用程式專案及其相依性，在方案總管中按兩下 BlazorApp 專案節點即可檢視。Properties 目錄內的 launchSettings.json 檔案會定義本機開發環境的不同設定檔設定。專案建立時會自動指派連接埠編號，並儲存在此檔案。
如果一切順利，請選取下方的 [繼續] 按鈕以移至下一個步驟。
執行您的應用程式
選取工作區左側 [活動列] 中的 [執行與偵錯] 圖示。
![使用 VS Code 執行按鈕執行應用程式]()
選取藍色 [執行與偵錯] 按鈕。
Visual Studio Code 會開啟啟動組設定的功能表。選取 C#: BlazorApp [預設設定]。
![使用 VS Code 執行按鈕執行應用程式]()
然後您必須選取偵錯工具才可移除。請選取 C#。
![使用 VS Code 執行按鈕執行應用程式]()
等候應用程式在瀏覽器中啟動。一旦您移至下列頁面，就已成功執行您的第一個 Blazor 應用程式!
![您網站的首頁包含一些文字，並在左側顯示幾個索引標籤以點擊和探索。]()
您可以隨時按一下上方工具列中的按鈕，以停止應用程式。
![使用 VS Code 執行按鈕執行應用程式]()
若要重新執行您的應用程式，請選取右上角執行按鈕右側的下拉式功能表，然後選取 [執行與該檔案相關聯的專案]。
![使用 VS Code 執行按鈕執行應用程式]()
顯示的頁面會由位於 Components/Pages 目錄中的 Home.razor 檔案定義。其內容看起來會像這樣:
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
它已經包含將它設定為首頁的程式碼，並顯示文字 Hello, world! 和 Welcome to your new app。PageTitle 元件會設定目前頁面的標題，以便顯示在瀏覽器的分頁中。
發生錯誤嗎?
如果您收到錯誤訊息指出「您的連線不是私人的」，並出現錯誤碼 NET::ERR_CERT_INVALID，請嘗試重新啟動所有瀏覽器視窗，讓瀏覽器可以挑選新憑證，然後再次執行應用程式。
如果您無法解決目前發生的問題，請選取下方的 [我遇到問題] 按鈕，以取得解決問題的協助。
嘗試計數器
在執行中的應用程式中，按一下左側提要欄位中的 [計數器] 索引標籤，瀏覽至 [計數器] 頁面。接著應該會顯示下列頁面:
![[計數器] 頁面會顯示 [按我] 按鈕，以遞增頁面上顯示的計數。]()
選取 [按一下我] 按鈕以在不進行頁面重新整理的情況下遞增計數。在網頁中遞增計數器通常需要寫入 JavaScript，但若使用 Blazor，即可使用 C#。
您可以在 Components/Pages 目錄內的 Counter.razor 檔案中找到 Counter元件的實作。
Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
瀏覽器中 /counter 的要求 (由頂端的 @page 指示詞指定) 會導致 Counter 元件轉譯其內容。@rendermode 指示詞會啟用元件的互動式伺服器轉譯，以便它可以處理瀏覽器中的使用者介面事件。
每次選取 [按我一下] 按鈕:
onclick 事件已引發。- 已呼叫
IncrementCount 方法。
currentCount 為遞增。- 呈現元件以顯示更新的計數。
新增元件
每個 .razor 檔案都會定義可重複使用的 UI 元件。
在 Visual Studio 中開啟 Home.razor 檔案。Home.razor 檔案已經存在，而且它是您建立專案時建立的。它位於先前建立之 BlazorApp 目錄中的 Components/Pages 資料夾中。
在文字編輯器中開啟 Home.razor 檔案。Home.razor 檔案已經存在，而且是在您執行 dotnet new 命令時所建立。它位於先前建立之 BlazorApp 目錄中的 Components/Pages 資料夾中。
在 Home.razor 檔案的結尾新增<Counter />，以將 Counter 元件新增至應用程式的首頁。
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
重新執行應用程式以查看變更。接著 Counter 元件會顯示在首頁上。
儲存此變更後，dotnet watch 命令即會將變更套用至執行中的應用程式，以便 Counter 元件可在首頁上顯示。
![首頁現在已包含顯示計數與按鈕的計數器。]()
修改元件
元件參數會使用屬性或子內容指定，這讓您可設定子元件的內容。在Counter元件上定義參數，以指定每次按下按鈕的遞增量:
- 為具有
[Parameter] 屬性的 IncrementAmount 新增公用屬性。
- 遞增
currentCount 的值時，請將 IncrementCount 方法變更為使用 IncrementAmount。
下列程式碼會顯示如何實現。醒目提示的線條會顯示變更。
Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}
在 Home.razor 中，更新 <Counter> 元素以新增IncrementAmount 屬性，該屬性會將遞增量變更為 10，如以下程式碼中醒目提示的行所示:
Components/Pages/Home.razor
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />
按一下 [熱重新載入] 按鈕，將變更套用至應用程式。Home 元件現在有自己的計數器，每當選取 [按我] 按鈕時，計數器就會以 10 遞增，如下列影像所示。/counter 的 Counter 元件 (Counter.razor) 會繼續以 1 遞增。
Home 元件現在有自己的計數器，每當選取 [按我] 按鈕時，計數器就會以 10 遞增，如下列影像所示。/counter 的 Counter 元件 (Counter.razor) 會繼續以 1 遞增。
![此首頁包含依 10 遞增的計數器，現在顯示於 40 的計數器。]()
後續步驟
恭喜，您已建置並執行您的第一個 Blazor 應用程式!
繼續學習
由於您已具備基本知識，請繼續在 Microsoft Learn (您將在其中建置待辦事項清單應用程式) 上使用 Blazor 自我引導式學習模組建置您第一個 Blazor 應用程式。
Microsoft Learn: 建置 Blazor 待辦事項清單應用程式
適用於初學者的 Blazor
了解如何從頭到尾建置完整的 Blazor 應用程式：
您可能也會想了解...
![[工作區信任] 對話方塊](https://dotnet.microsoft.com/blob-assets/images/tutorials/dotnet-hello-world/workspace-trust-dialog.png)
![[計數器] 頁面會顯示 [按我] 按鈕，以遞增頁面上顯示的計數。](https://dotnet.microsoft.com/blob-assets/images/tutorials/blazor/screenshot-blazor-tutorial-try.png)
