大家好，我是碼農剛子。最近自學ASP.NET Core Blazor，順便記錄一下學習過程和筆記，后面也會持續更新學習內容。如果有正在進行或者想學習Blazor的同學，歡迎一起探討學習。

1、Blazor 簡介

Blazor 是由Microsoft開發的一款基于.NET的開源交互式Web UI框架。Blazor使開發人員能夠使用C#和HTML建立全堆棧的單頁應用程序，并避免使用JavaScript。Blazor基于組件模型，該模型提供了以具有強類型的符合Razor標準的頁面和組件的形式構建用戶界面的能力。

Blazor的加入使得.NET開發人員有機會在客戶端和服務器上使用同一種編程模型，同時享受到.NET的優勢，比如其功能強大的運行時，標準庫，語言互操作性和輔助開發者高效開發的工具等。

在Blazor中，有兩個主要的托管模型：

• Blazor Server: 在此模式下，應用程序在服務器端運行，并使用SignalR實時通訊框架與瀏覽器進行交互。這種模型要求永久的有效連接，但是客戶端的計算和下載需求會大大減低，所有的邏輯運行都在服務器端。
• Blazor WebAssembly: 在此模式下，應用程序直接在客戶端的WebAssembly中運行，允許C#代碼在瀏覽器中執行，不依賴服務器。

Blazor 支持的瀏覽器：

下表所示的瀏覽器在移動平臺和桌面平臺上均支持 Blazor WebAssembly 和 Blazor Server。

瀏覽器	Version
Apple Safari	當前版本+
Google Chrome	當前版本+
Microsoft Edge	當前版本+
Mozilla Firefox	當前版本+

Blazor三種托管模型及其各自特點

1、Blazor Server

簡介：

Blazor Server 應用程序在服務器上運行，可享受完整的 .NET Core 運行時支持。所有處理都在服務器上完成，UI/DOM 更改通過 SignalR 連接回傳給客戶端。這種雙向 SignalR 連接是在用戶第一次從瀏覽器中加載應用程序時建立的。 由于 .NET 代碼已經在服務器上運行，因此您無需為前端創建 API。您可以直接訪問服務、數據庫等，并在傳統的服務端技術上做任何您想做的事情。在客戶端上，Blazor 腳本 (blazor.server.js) 與服務器建立 SignalR 連接。 腳本由 ASP.NET Core 共享框架中的嵌入資源提供給客戶端應用。 客戶端應用負責根據需要保持和還原應用狀態。

Blazor Server 托管模型優點：

• 下載項大小明顯小于 Blazor WebAssembly 應用，且應用加載速度快得多。
• 應用可以充分利用服務器功能，包括對 .NET Core API 的使用。
• 服務器上的 .NET Core 用于運行應用，因此調試等現有 .NET 工具可按預期正常工作。
• 支持瘦客戶端。 例如，Blazor Server 應用適用于不支持 WebAssembly 的瀏覽器以及資源受限的設備。
• 應用的 .NET/C# 代碼庫（其中包括應用的組件代碼）不適用于客戶端。

Blazor Server 托管模型局限性：

• 通常延遲較高。 每次用戶交互都涉及到網絡躍點。
• 不支持脫機工作。 如果客戶端連接失敗，應用會停止工作。
• 若要縮放具有許多用戶的應用，需要使用服務器資源處理多個客戶端連接和客戶端狀態。
• 需要 ASP.NET Core 服務器為應用提供服務。 無服務器部署方案不可行，例如通過內容分發網絡 (CDN) 為應用提供服務的方案。

2、Blazor WebAssembly

簡介：

Blazor WebAssembly（WASM）應用程序在瀏覽器中基于WebAssembly的.NET運行時運行客戶端。Blazor應用程序及其依賴項和.NET運行時被下載到瀏覽器中。該應用程序直接在瀏覽器的UI線程上執行。UI更新和事件處理在同一進程中進行。應用程序的資產被作為靜態文件部署到能夠為客戶提供靜態內容的網絡服務器或服務上。當Blazor WebAssembly應用被創建用于部署，而沒有后端ASP.NET Core應用為其提供文件時，該應用被稱為獨立的Blazor WebAssembly應用。當應用程序被創建用于部署，并有一個后端應用程序為其提供文件時，該應用程序被稱為托管的Blazor WebAssembly應用程序。

Blazor WebAssembly 托管模型優點：

• 從服務器下載應用后，沒有 .NET 服務器端依賴項，因此，如果服務器脫機，應用將保持正常運行。
• 可充分利用客戶端資源和功能。
• 工作可從服務器轉移到客戶端。
• 無需 ASP.NET Core Web 服務器即可托管應用。 無服務器部署方案可行，例如通過內容分發網絡 (CDN) 為應用提供服務的方案。

Blazor WebAssembly 托管模型局限性：

• 應用僅可使用瀏覽器功能。
• 需要可用的客戶端硬件和軟件（例如 WebAssembly 支持）。
• 下載項大小較大，應用加載耗時較長。

Blazor WebAssembly 支持預先 (AOT) 編譯，你可以直接將 .NET 代碼編譯到 WebAssembly 中。 AOT 編譯會提高運行時性能，代價是應用大小增加。

3、Blazor Hybrid

簡介：

• Blazor 還可用于使用混合方法生成本機客戶端應用。 混合應用是利用 Web 技術實現其功能的本機應用。 在 Blazor Hybrid 應用中，Razor 組件與任何其他 .NET 代碼一起直接在本機應用中（而不在 WebAssembly 上）運行，并通過本地互操作通道基于 HTML 和 CSS 將 Web UI 呈現到嵌入式 Web View 控件。
• 可以使用不同的 .NET 本機應用框架（包括 .NET MAUI、WPF 和 Windows 窗體）生成 Blazor Hybrid 應用。 Blazor 提供 BlazorWebView 控件，將 Razor 組件添加到使用這些框架生成的應用。 通過結合使用 Blazor 和 .NET MAUI，可以便捷地生成適用于移動和桌面的跨平臺 Blazor Hybrid 應用，而將 Blazor 與 WPF 和 Windows 窗體集成可以更好地實現現有應用的現代化。
• 由于 Blazor Hybrid 應用是本機應用，它們可以支持只有 Web 平臺所沒有的功能。 通過正常的 .NET API，Blazor Hybrid 應用對本機平臺功能具有完全訪問權限。 Blazor Hybrid 應用還可以與現有 Blazor Server 或 Blazor WebAssembly 應用共享和重復使用組件。 Blazor Hybrid 應用結合了 Web、本機應用和 .NET 平臺的優點。

Blazor Hybrid 托管模型優點：

• 重復使用可在移動、桌面和 Web 之間共享的現有組件。
• 利用 Web 開發技能、體驗和資源。
• 應用對設備的本機功能具有完全訪問權限。

Blazor Hybrid 托管模型局限性：

• 必須為每個目標平臺生成、部署和維護單獨的本機客戶端應用。
• 與在瀏覽器中訪問 Web 應用相比，查找、下載和安裝本機客戶端應用通常需要更長的時間。

2、安裝 .NET SDK 和 Visual Studio/VS Code

如何安裝.NET SDK？

1. 下載 .NET SDK

1. 打開瀏覽器，訪問 .NET 官方下載頁面。
2. 在頁面中選擇最新版本的 .NET SDK，通常會有多個版本可供選擇。建議選擇最新或穩定版本（根據你的需求而定）。

2. 安裝 .NET SDK

1. 下載完成后，雙擊運行下載的安裝程序。
2. 按照安裝向導的提示進行安裝。一般情況下，我們可以接受默認設置。
3. 安裝完成后，重新啟動計算機（如果有提示的話）。

3. 驗證安裝

安裝完成后，我們需要驗證 .NET SDK 是否安裝成功。打開命令提示符（cmd）或 PowerShell，輸入以下命令：

dotnet --version

如果您看到版本號的輸出，那就表示您成功安裝了 ，。

如何安裝Visual Studio？

1. 下載

1. 打開官網，下滑，找到如下界面，點擊下載下拉菜單，選擇Community2022（這個是免費的）進行下載。
2. 下載后得到安裝包VisualStudioSetup.exe，如下圖所示。

2. 安裝

1. 雙擊下載的安裝包打開==》點擊繼續，等待下載安裝完成==》選擇需要的應用程序和組件，以及相應的SDK，左下角修改安裝路徑和緩存路徑。
2. 在選擇安裝路徑時，要注意以下兩點：

1. 緩存文件與安裝文件不能放一起，即二者的安裝路徑不能一樣！
2. 安裝路徑中不要出現中文，否則之后容易報錯或者安裝不成功！

3. 路徑選擇好后，點擊右下角安裝，出現如下安裝界面，等待安裝即可（安裝時間較長，請耐心等待）
4. 安裝完成后會出現“安裝完畢”的提示，點擊確定即可。
5. 下一步點擊“重啟”按鈕即可。

如何安裝VS Code？

1.下載

訪問VSCode官網：首先，打開瀏覽器訪問VSCode官網，地址：https://code.visualstudio.com/，點擊Download下載

2.安裝

1. 下載后直接點擊打開文件
2. 將選項都選中，尤其注意添加到PATH。然后點擊下一步
3. 進入安裝頁面，等待安裝完畢。
4. 安裝完成，點擊完成并打開vscode。

3、創建第一個 Blazor Server 和 Blazor WebAssembly 項目

1.Blazor Server 項目

在這里，我們創建一個Blazor Server 模式的程序。

1. 啟動 Visual Studio 2022 并選擇“創建新項目”。

2. 在“創建新項目”窗口中，在搜索框中鍵入 Blazor Server，然后按 Enter。
3. 選擇“Blazor Server 應用”模板并選擇“下一步”。

4. 在“配置新項目”窗口中，輸入 BlazorApp 作為項目名稱，然后選擇“下一步”。

5. 在“其他信息”窗口中，如果尚未選擇，則在“框架”下拉列表中選擇“.NET 6.0 ”，然后單擊“創建”按鈕。

項目文件說明

• wwwroot 文件夾：包含應用的公共靜態資產，如 CSS、JavaScript 文件等。
• Program.cs 是啟動服務器以及在其中配置應用服務和中間件的應用的入口點。
• App.razor 為應用的根組件。
• Pages 目錄包含應用的一些示例網頁。
• BlazorApp.csproj 定義應用項目及其依賴項，且可以通過雙擊解決方案資源管理器中的 BlazorApp 項目節點進行查看。
• Properties 目錄中的 launchSettings.json 文件為本地開發環境定義不同的配置文件設置。創建項目時會自動分配端口號并將其保存在此文件上。

運行應用

單擊 Visual Studio 調試工具欄中的“開始調試”按鈕(綠色箭頭)以運行應用。

首次在 Visual Studio 中運行 Web 應用時，它將設置用于通過 HTTPS 托管應用的開發證書，然后提示你信任該證書。建議同意信任該證書。證書將僅用于本地開發，如果沒有證書，大多數瀏覽器都會對網站的安全性進行投訴。

等待應用在瀏覽器中啟動。轉到以下頁面后，你已成功運行第一個 Blazor 應用!

2.Blazor WebAssembly 項目

添加新項目

1. 點擊解決方案==》鼠標右鍵==》添加==》新建項目
2. 在“創建新項目”窗口中，在搜索框中鍵入 Blazor WebAssembly，然后按 Enter。
3. 選擇“Blazor WebAssembly 獨立應用”模板并選擇“下一步”。

4. 在“配置新項目”窗口中，輸入 BlazorAppWasm 作為項目名稱，然后選擇“下一步”。

5. 在“其他信息”窗口中，如果尚未選擇，則在“框架”下拉列表中選擇“.NET 6.0 ”，然后單擊“創建”按鈕。

項目文件說明

• wwwroot 文件夾：包含應用的公共靜態資產，如 CSS、JavaScript 文件等。
• Pages 文件夾：包含可路由的 Razor 組件，每個頁面的路由通過 @page 指令指定。
• Shared 文件夾：包含共享組件，如布局組件。
• Program.cs：應用的入口點，用于設置 WebAssembly 主機，注冊服務和配置應用。
• App.razor：應用的根組件，使用 Router 組件設置客戶端路由。

運行應用

將此項目設為啟動項，單擊 Visual Studio 調試工具欄中的“開始調試”按鈕(綠色箭頭)以運行應用。

等待應用在瀏覽器中啟動。轉到以下頁面后，你已成功運行第一個 Blazor WebAssembly 應用!

3.如何選擇要使用的托管模型？

根據應用的功能要求選擇 Blazor 托管模型。 下表顯示了選擇托管模型的主要注意事項。

Blazor Hybrid 應用包括 .NET MAUI、WPF 和 Windows 窗體框架應用。

功能	Blazor Server	Blazor WebAssembly (WASM)	Blazor Hybrid
與 .NET API 完全兼容	??支持	??	??支持
直接訪問服務器和網絡資源	??支持	?不支持?	?不支持?
較小的有效負載，較快的初始加載速度	??支持	??	??
接近本機執行速度	??支持	??支持?	??支持
服務器上安全且專用的應用代碼	??支持	?不支持?	?不支持?
下載后即可脫機運行應用	??	??支持	??支持
靜態站點托管	??	??支持	??
將處理過程轉移至客戶端	??	??支持	??支持
對本機客戶端功能具有完全訪問權限	??	??	??支持
基于 Web 的部署	??支持	??支持	??

?Blazor WebAssembly 和 Blazor Hybrid 應用可以使用基于服務器的 API 來訪問服務器/網絡資源并訪問專用和安全的應用代碼。

?Blazor WebAssembly 僅通過預先 (AOT) 編譯達到接近本機性能。

4、理解組件化開發思想

1. 組件化核心理念

什么是組件化？

組件化是將UI拆分為獨立、可復用、自包含的代碼單元的思想。在Blazor中，每個組件都是一個完整的功能模塊。

// 傳統方式 vs 組件化方式
// 傳統：整個頁面寫在一起
// 組件化：拆分為多個職責單一的小組件

2. Blazor組件的基本結構

Razor組件示例

<!-- Counter.razor -->
<div class="card">
    <h3>計數器組件</h3>
    <p>當前計數: @currentCount</p>
    <button class="btn btn-primary" @onclick="IncrementCount">
        點擊 +1
    </button>
</div>

@code {
    private int currentCount = 0;
    
    [Parameter]
    public int InitialCount { get; set; }
    
    [Parameter]
    public EventCallback<int> OnCountChanged { get; set; }

    private void IncrementCount()
    {
        currentCount++;
        OnCountChanged.InvokeAsync(currentCount);
    }
    
    protected override void OnInitialized()
    {
        currentCount = InitialCount;
    }
}

3. 組件化的核心特征

3.1 封裝性

<!-- UserCard.razor -->
<div class="user-card">
    <img src="@AvatarUrl" alt="@UserName" />
    <div class="user-info">
        <h4>@UserName</h4>
        <p>@Email</p>
        <p>注冊時間: @JoinDate.ToString("yyyy-MM-dd")</p>
    </div>
</div>

@code {
    [Parameter] public string UserName { get; set; } = string.Empty;
    [Parameter] public string Email { get; set; } = string.Empty;
    [Parameter] public string AvatarUrl { get; set; } = string.Empty;
    [Parameter] public DateTime JoinDate { get; set; }
}

3.2 可復用性

<!-- 在父組件中復用 -->
<UserCard 
    UserName="張三" 
    Email="zhangsan@email.com"
    AvatarUrl="/images/avatar1.jpg"
    JoinDate="new DateTime(2023, 1, 1)" />

<UserCard 
    UserName="李四" 
    Email="lisi@email.com"
    AvatarUrl="/images/avatar2.jpg"
    JoinDate="new DateTime(2023, 2, 1)" />

3.3 數據傳遞

<!-- ParentComponent.razor -->
<TodoList 
    Items="@todos" 
    OnItemAdded="HandleItemAdded"
    OnItemDeleted="HandleItemDeleted" />

@code {
    private List<TodoItem> todos = new();
    
    private void HandleItemAdded(TodoItem newItem)
    {
        todos.Add(newItem);
        StateHasChanged();
    }
    
    private void HandleItemDeleted(TodoItem deletedItem)
    {
        todos.Remove(deletedItem);
        StateHasChanged();
    }
}

3.4 組件組合

<!-- Dashboard.razor -->
<div class="dashboard">
    <div class="sidebar">
        <NavigationMenu />
        <UserProfile />
    </div>
    <div class="main-content">
        <Header />
        <ContentArea>
            <WidgetContainer>
                <ChartWidget />
                <StatsWidget />
                <RecentActivity />
            </WidgetContainer>
        </ContentArea>
    </div>
</div>

4. 高級組件化模式

4.1 渲染片段

<!-- Modal.razor -->
<div class="modal @(IsVisible ? "show" : "hide")">
    <div class="modal-header">
        <h3>@Title</h3>
        <button @onclick="Close">×</button>
    </div>
    <div class="modal-body">
        @ChildContent
    </div>
    <div class="modal-footer">
        @FooterContent
    </div>
</div>

@code {
    [Parameter] public string Title { get; set; } = string.Empty;
    [Parameter] public bool IsVisible { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public RenderFragment FooterContent { get; set; }
    [Parameter] public EventCallback OnClose { get; set; }

    private void Close() => OnClose.InvokeAsync();
}

4.2 泛型組件

<!-- DataGrid.razor -->
@typeparam TItem

<div class="data-grid">
    <table>
        <thead>
            <tr>
                @foreach (var column in Columns)
                {
                    <th>@column.Title</th>
                }
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Items)
            {
                <tr>
                    @foreach (var column in Columns)
                    {
                        <td>@column.Value(item)</td>
                    }
                </tr>
            }
        </tbody>
    </table>
</div>

@code {
    [Parameter] public IEnumerable<TItem> Items { get; set; } = null!;
    [Parameter] public List<ColumnDefinition<TItem>> Columns { get; set; } = new();
}

public class ColumnDefinition<T>
{
    public string Title { get; set; } = string.Empty;
    public Func<T, object> Value { get; set; } = null!;
}

5、學習 Razor 語法基礎

Razor語法簡介

Razor 是一種輕量級的標記語法，用于將服務器端代碼（如 C# 或 VB.NET）嵌入到 HTML 頁面中。它廣泛用于 ASP.NET Web 應用程序開發，支持動態內容生成。

核心語法規則

• Razor 代碼塊包含在 @{ ... } 中
• 內聯表達式（變量和函數）以 @ 開頭，例如 @DateTime.Now
• 代碼語句用分號結束
• 變量使用 var 關鍵字聲明
• 字符串用引號括起來
• C# 代碼區分大小寫
• C# 文件的擴展名是 .cshtml

使用示例

基本用法示例

@{
   var UserName = "CSharp精選營";
   var currentTime = DateTime.Now;
}
<p>歡迎來到@UserName 當前時間是: @currentTime</p>

輸出: Hello, Razor! 當前時間是: 2023-10-13 10:30:00

條件判斷 @if, else if, else, and @switch

@{
   var hour = DateTime.Now.Hour;
   var message = hour > 12 ? "下午好" : "上午好";
}
<p>@message</p>

輸出: 根據當前時間顯示“上午好”或“下午好”。

循環結構

Razor 支持多種循環，如 for, foreach, while，do while 等。

<ul>
@for (int i = 1; i <= 5; i++) {
   <li>第 @i 項</li>
}
</ul>

輸出: 生成一個包含 5 項的無序列表。

動態用戶輸入處理

Razor 可以通過 Request["參數名"] 獲取用戶輸入。

@{
   var name = Request["name"] ?? "游客";
}
<p>歡迎, @name!</p>

用戶提交表單后，頁面會動態顯示歡迎信息。

更多Razor語法請查看ASP.NET Core 的 Razor 語法??: ASP.NET Core 的 Razor 語法參考 | Microsoft Learn