Blazor 教學課程 - 建置您的第一個 Web 應用程式

入門

用途

在 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、Visual Studio Code 及 C# 開發套件是什麼?

.NET SDK (軟體開發套件) 是您使用 C# 建置及執行應用程式時所需之免費開放原始碼工具與程式庫集合。C# 是您在此教學課程中要用到的新式目標取向程式設計語言。
Visual Studio Code (VS Code) 是全世界最熱門的輕量型免費開放原始碼程式碼編輯器。您會在這裡撰寫您的 C# 程式碼。
C# 開發套件是一組強大的 VS Code 延伸模組，讓 C# 開發變得更容易。可協助您在建置應用程式時撰寫、測試及偵錯程式碼。

.NET WinGet 組態檔會為您安裝 .NET 10 SDK、VS Code 及 C# 開發套件。如果您已安裝某些工具，WinGet 會略過該工具的安裝步驟。

下載並安裝 .NET SDK:

安裝 .NET 10 SDK 指示

下載 .NET 10 SDK x64 (Intel)
下載 .NET 10 SDK Arm64 (Apple Silicon)

如果您使用的 Mac 上有 Apple M1 或 M2 晶片，則必須安裝 Arm64 版本的 SDK。
下載並安裝 VS Code:

下載 VS Code
開啟 VS Code 並選取 VS Code 的活動列左側的 [擴充功能] 按鈕。在搜尋列中輸入 C#，選取 [C# 開發套件]，然後在 C# 開發套件延伸模組頁面選取 [安裝] 按鈕。

下載並執行設定工具

按一下下列連結以下載 WinGet 檔案:

.NET WinGet 組態檔

開啟您的下載資料夾，然後按兩下檔案以開始安裝。如果系統要求您選取要執行檔案的應用程式，請選取 [Windows 封裝管理員用戶端]。

終端機將會開起，您應會看到 WinGet 組態檔已準備好安裝 .NET 10 SDK、VS Code (若未安裝) 和 C# 開發套件。

閱讀並同意授權條款: 在終端機中鍵入 “y”，然後按 Enter 鍵。

注意: 您有責任了解自己選擇執行的組態設定。Microsoft 對您撰寫或匯入的組態檔概不負責。此設定可能會變更 Windows 設定、安裝軟體、變更軟體設定 (包括安全性設定)，以及代表您接受協力廠商套件和服務的使用者合約。執行此組態檔，即表示您了解並同意這些資源與設定。您安裝的所有應用程式均由程式擁有者授權。Microsoft 對協力廠商套件或服務或其授權概不負責。

WinGet 現在會為您安裝開始作業所需的一切!安裝時間取決於您的電腦規格、網路速度等等。可能需要 5 分鐘的時間，但最多需要 15 分鐘才能完成。

某些安裝步驟可能需要系統管理員層級權限才能安裝。在 Windows 工作列中查看閃爍的使用者帳戶控 (UAC) 提示，然後按一下該圖示。若要繼續安裝，您必須在出現提示時選取 [是]。

安裝完成後，您應該會在終端機中看到下列輸出。

檢查是否已正確安裝所有項目

環境設定完成後，請移至 Windows 任務列中的 [搜尋]，然後鍵入 Visual Studio Code。按一下應用程式以開啟 VS Code。

注意: 如果透過終端機開啟 VS Code，即必須啟用 [工作區信任]。

現在請移至工具列，依序選取 [終端機] 和 [新的終端機]，開啟新的終端機。

在您的終端中執行下列命令，以檢查安裝。

Terminal

dotnet

如果安裝成功，您應該會看到類似下列的輸出:

Terminal

Usage: dotnet [path-to-application]
Usage: dotnet [commands]

path-to-application:
The path to an application .dll file to execute.

commands:
-h|--help                         Display help.
--info                            Display .NET information.
--list-runtimes [--arch ]         Display the installed runtimes matching the host or specified architecture. Example architectures: arm64, x64, x86.
--list-sdks [--arch ]             Display the installed SDKs matching the host or specified architecture. Example architectures: arm64, x64, x86.

如果一切順利，請選取下方的 [繼續] 按鈕以移至下一個步驟。

發生錯誤嗎?

如果您收到 [無法將 'dotnet' 辨識為內部或外部命令] 錯誤，請確定已開啟新的 VS Code 終端。如果重新啟動 VS Code 或 重新啟動您的機器都無法解決問題，請使用 [我遇到問題] 按鈕以尋求解決問題的協助。

建立您自己的應用程式

按下 CTRL+SHIFT+P，在 VS Code 中開啟命令選擇區。
按下 CMD+SHIFT+P，在 VS Code 中開啟命令選擇區。
輸入 .NET: 以查看您可以使用 C# 開發套件執行的命令!
尋找並選取 [.NET: 新專案] 以建立新的 .NET 專案。
向下捲動並選取 [Blazor Web 應用程式]。
收到提示時，在命令選擇區中將專案命名為 BlazorApp。按 Enter 以確認。
選擇您要儲存專案的資料夾位置。
如果您同時看到 .sln 和 .slnx 檔案，請選擇 .sln 檔案以開啟完整解決方案。

.slnx 檔案僅載入解決方案的一部分，通常用於大型專案。針對此教學課程，使用 .sln 可確保您擁有所有必要的內容。
按一下 [建立專案] 以載入新的 BlazorApp。

勾選方塊並選取 [是，我信任作者]，以啟用 [工作區信任]。

啟用後，系統會提示您重新載入 C# 開發人員套件擴充功能。請點擊 [重新載入擴充功能] 按鈕

如果您有 Visual Studio 訂閱，請登入您的帳戶。如果您沒有看到提示快顯視窗，請按一下接近視窗右下方 VS Code 狀態列中的 C# 圖示。

確定側邊欄中的 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 檔案會定義本機開發環境的不同設定檔設定。專案建立時會自動指派連接埠編號，並儲存在此檔案。

如果一切順利，請選取下方的 [繼續] 按鈕以移至下一個步驟。

執行您的應用程式

選取工作區左側 [活動列] 中的 [執行與偵錯] 圖示。

為能夠執行和偵錯，請確保您在編輯器中未開啟任何檔案。請選取藍色的 [執行與偵錯] 按鈕。

您必須選取偵錯工具才可移除。請選取 [C#]。

接著 Visual Studio Code 會開啟啟動組設定的功能表。選取 C#: BlazorApp [預設設定]。

等候應用程式在瀏覽器中啟動。一旦您移至下列頁面，就已成功執行您的第一個 Blazor 應用程式!

您可以隨時按一下上方工具列中的按鈕，以停止應用程式。

若要重新執行您的應用程式，請選取右上角執行按鈕右側的下拉式功能表，然後選取 [執行與該檔案相關聯的專案]。

顯示的頁面會由位於 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 檔案的結尾新增 <Counter /> 元素，以將Counter 元件新增至應用程式的首頁。

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

重新執行應用程式以查看變更。接著 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。

後續步驟

恭喜，您已建置並執行您的第一個 Blazor 應用程式!

繼續學習

由於您已具備基本知識，請繼續在 Microsoft Learn (您將在其中建置待辦事項清單應用程式) 上使用 Blazor 自我引導式學習模組建置您第一個 Blazor 應用程式。

Microsoft Learn: 建置 Blazor 待辦事項清單應用程式

適用於初學者的 Blazor

了解如何從頭到尾建置完整的 Blazor 應用程式：

您可能也會想了解...

Blazor 文件

瀏覽我們有關 Blazor 的文件，了解如何建置出色的 Web 應用程式。

Blazor 發佈概念

請掌握 Microsoft Learn 的最新內容，了解如何使用 Azure Static Web Apps 發佈 Blazor 應用程式和 .NET API。

建置 REST API

使用 ASP.NET 建立 REST API