Blazor是ASP.NET Core框架的一部分，允許開發者使用C#而非JavaScript來進行前端開發。它提供了豐富的功能和互動性，讓開發者可以更簡單地構建現代Web應用。本篇將介紹如何使用Blazor來進行前端開發，並展示其核心功能。

1. Blazor的基本概念

Blazor是一個基於.NET的前端框架，它允許開發者使用C#來代替傳統的JavaScript進行客戶端邏輯開發。Blazor分為兩種模式：

• Blazor WebAssembly (WASM)： 在瀏覽器中執行C#代碼，無需依賴伺服器。
• Blazor Server： 所有邏輯都在伺服器端執行，並通過SignalR與客戶端進行互動。

這兩種模式都能實現高效的前端開發，根據需求選擇適合的方案。

2. 創建Blazor專案

使用以下命令創建一個新的Blazor WebAssembly專案：

dotnet new blazorwasm -o MyBlazorApp

執行這個命令後，.NET會自動生成一個Blazor專案骨架，包括基本的頁面佈局和組件。

3. Blazor組件的基礎

Blazor的核心是組件（Component），每個組件是一個可重用的UI單元。組件由C#代碼和Razor標記語法組成。以下是Blazor組件的一個簡單範例：

@page "/counter"

<h3>Counter</h3>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

在這個範例中，當按鈕被點擊時，IncrementCount方法會將計數器加1，並即時更新UI。

4. Blazor的雙向數據綁定

Blazor提供了強大的雙向數據綁定功能，允許UI元素與數據模型進行同步更新。以下是簡單的雙向數據綁定範例：

@page "/bind"

<h3>雙向數據綁定範例</h3>

<input @bind="name" />

<p>輸入的名稱是: @name</p>

@code {
    private string name = "";
}

當用戶在輸入框中輸入內容時，name變數會即時更新並反映在頁面上。

5. 依賴注入與狀態管理

Blazor支持依賴注入，允許我們在組件中輕鬆管理服務。以下範例展示了如何在Blazor中使用依賴注入：

@inject HttpClient Http

<p>API資料: @apiData</p>

@code {
    private string apiData;

    protected override async Task OnInitializedAsync()
    {
        apiData = await Http.GetStringAsync("https://api.example.com/data");
    }
}

這個範例中，Blazor會自動注入HttpClient服務來進行API調用。

6. 小結

Blazor提供了現代Web開發中高效且靈活的解決方案，允許開發者使用C#進行前端開發。無論是WebAssembly還是Server模式，Blazor都可以帶來良好的開發體驗，並且與.NET生態系統無縫整合，成為建構前端應用的有力工具。