Blazor 教學課程 | 建立您的第一個應用程式

入門

目的

Build your first web app with ASP.NET Core using Blazor in Visual Studio Code.

必要條件

無。

完成時間

10 至 15 分鐘 + 下載/安裝時間

情節

建立、使用及修改簡單計數器元件。

Prefer Visual Studio or the CLI?

If you prefer, you can also get started with Blazor using Visual Studio or the command-line interface.

下載並安裝

您需要安裝 .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 8 SDK、VS Code 及 C# 開發套件。如果您已安裝某些工具，Winget 會略過該工具的安裝步驟。

下載並安裝 .NET SDK:

安裝 .NET 8 SDK 指示

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

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

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

按一下下方連結即可下載檔案。

.NET Winget 設定檔

開啟您的下載資料夾，然後按兩下檔案以開始安裝。

按兩下檔案後即會開啟終端機，您會看到 Winget 設定檔已準備好安裝 .NET 8 SDK、VS Code (若未安裝) 和 C# 開發套件。

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

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

Winget 現在會為您安裝開始作業所需的一切!約需 5 分鐘即可完成，完成後，您就會在終端機中看到下方的輸出。

按兩下檔案後即會開啟開發人員首頁，您會看到 Winget 設定檔已準備好安裝 .NET 8 SDK、VS Code (若未安裝) 和 C# 開發套件。

閱讀並同意授權條款: 按一下左下方的 [我同意並想要繼續]，再按一下右下方的 [設定為系統管理員]。詢問您是否允許開發人員首頁變更裝置時，請選取 [是]。

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

開發人員首頁正在安裝開始作業所需的一切!約需 5 分鐘即可完成，完成後，您就會在視窗中看到下方的輸出。

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

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

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

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

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

Terminal

dotnet

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

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 專案。
Scroll down and select Blazor Web App.
選擇您要儲存專案的資料夾位置。
Name the project BlazorApp in the command palette when prompted. Press Enter to confirm.

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

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

In the Side Bar, make sure the VS Code Explorer is open. Here you will see the BlazorApp folder and the Solution Explorer.
Follow along with the video below to: collapse the BlazorApp folder, open the Solution Explorer, open the BlazorApp project, and drag and drop the Solution Explorer higher.

Collapse the BlazorApp folder in the VS Code Explorer.
按一下方案總管左側的箭號即可展開。
Click on the chevron to the left of the BlazorApp project in the Solution Explorer to expand it.
Drag and drop the Solution Explorer below BlazorApp.

Your project is created and loaded in Visual Studio Code. Take a look at the contents of your project using Solution Explorer.

已建立數個檔案，為您提供一個已準備執行的簡單 Blazor 應用程式。

Program.cs 是啟動伺服器以及您在其中設定應用程式服務與中介軟體之應用程式的進入點。
在 Components 目錄中:
- App.razor 是應用程式的根元件。
- Routes.razor 設定 Blazor 路由器。
- Pages 目錄會包含應用程式的一些範例網頁。
BlazorApp.csproj 會定義應用程式專案及其相依性，在方案總管中按兩下 BlazorApp 專案節點即可檢視。
Properties 目錄內的 launchSettings.json 檔案會定義本機開發環境的不同設定檔設定。專案建立時會自動指派連接埠編號，並儲存在此檔案。

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

執行您的應用程式

Select the Run and Debug icon in the Activity Bar on the left side of your workspace.

Select the blue Run and Debug button.

Visual Studio Code will open up a menu of launch configurations. Select C#: BlazorApp [Default Configuration].

Then you need to select a debugger. Select C#.

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

You can stop the app at any time by clicking on the stop button in the top toolbar.

To re-run your application, select the dropdown menu to the right of the run button in the top right, and select Run project associated with this file.

顯示的頁面會由位於 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 />

Re-run the app to see the changes. The Counter component will then show up on the home page.

修改元件

元件參數會使用屬性或子內容指定，這讓您可設定子元件的內容。在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

使用 Blazor 組建您的第一個具有 ASP.NET Core 的 Web 應用程式

入門

目的

必要條件

完成時間

情節

Prefer Visual Studio or the CLI?

下載並安裝

選取 [終端機或開發人員首頁安裝指示]

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

發生錯誤嗎?

建立您自己的應用程式

執行您的應用程式

發生錯誤嗎?

嘗試計數器

新增元件

修改元件

後續步驟

繼續學習

適用於初學者的 Blazor

Blazor 文件

Blazor 發佈概念

建置 REST API

回報問題

提供意見反應