第一章 Blazor WebAssembly 基礎入門

1. Blazor WebAssembly 簡介

什麼是 Blazor 和 WebAssembly

📚 Blazor是一個由微軟推出的開源 Web 框架，其核心優勢在於允許開發者使用 C# 和 .NET 技術棧來構建豐富的交互式 Web 用户界面（UI），而無需過多依賴 JavaScript。它的名稱 “Blazor” 是 Browser（瀏覽器）和 Razor（.NET 的模板引擎）的組合詞，點明瞭其運行在瀏覽器中並使用 Razor 語法的特點。

⚡ WebAssembly（縮寫為 WASM）是一種為 Web 設計的高性能、低級的二進制指令格式。它作為一種通用的編譯目標，允許使用 C++、Rust、C# 等多種高級語言編寫的代碼在現代 Web 瀏覽器中以接近原生的速度運行。

Blazor WebAssembly 學習大綱

Blazor WebAssembly 的工作原理：

• 🛠️ 你的 C# 代碼被編譯成 .NET 程序集
• 📥 這些程序集與 .NET 運行時一起下載到瀏覽器
• 🚀 WebAssembly 在瀏覽器中執行 .NET 代碼
• 🔄 通過 JavaScript 互操作與 DOM 交互

Blazor Server vs Blazor WebAssembly

架構對比示意圖：

架構對比示意圖

優勢和應用場景

✅ Blazor WebAssembly 的優勢：

• 全棧 .NET 開發：前後端都使用 C#
• 豐富的生態系統：利用現有的 .NET 庫和工具
• 性能優秀：接近原生應用的性能
• 安全可靠：代碼在瀏覽器沙箱中運行
• 可離線運行：支持漸進式 Web 應用

🎯 適用場景：

• 🏢 企業內部應用
• 📊 數據密集型儀表板
• ⚙️ 需要複雜業務邏輯的應用
• 🔄 希望重用 .NET 技能的項目

2. 開發環境搭建

安裝 .NET SDK

步驟 1：下載 .NET SDK
訪問 https://dotnet.microsoft.com/download.NET官方網站下載最新版本的.NET SDK。

根據你的操作系統選擇合適版本：

• Windows: x64 安裝程序
• macOS: x64 或 ARM64 安裝程序
• Linux: 選擇對應的發行版

步驟 2：驗證安裝
💻 點擊安裝程序直接安裝。

配置 Visual Studio

Visual Studio 2022 配置：

1. 🛠️ 安裝時選擇"ASP.NET 和 Web 開發"工作負載
2. ✅ 確保包含 Blazor WebAssembly 工具

安裝步驟： 運行 Visual Studio Installer，點擊"修改"現有安裝或安裝新版本 在工作負載標籤頁中勾選ASP.NET 和Web開發。

勾選截圖

瀏覽器要求和調試工具

🌐 支持的瀏覽器：

• Chrome/Edge 90+
• Firefox 90+
• Safari 14+

🔧 啓用調試： 在 Chrome/Edge 中：

1. 按 F12 打開開發者工具
2. 轉到"源代碼"標籤
3. 啓用".NET 調試"

詳細調試設置：

1. 確保安裝了瀏覽器調試擴展
2. 在 launchSettings.json 中配置 inspectUri
3. 運行應用時，瀏覽器地址欄會顯示"已連接調試器"

3. 創建第一個 Blazor WebAssembly 應用

項目模板介紹

📋 Blazor WebAssembly 提供多種項目模板：

# 查看可用模板
dotnet new --list

#主要模板：
dotnet new blazorwasm          # 獨立 Blazor WebAssembly
dotnet new blazorwasm --hosted # 帶 ASP.NET Core 主機
dotnet new blazorwasm --pwa    # 漸進式 Web 應用

模板選擇指南：

• 🏢 企業應用：選擇 --hosted（有後端 API）
• 📱 單頁應用：選擇獨立版本
• 🔄 離線應用：選擇 --pwa 版本

項目結構解析

🛠️ 讓我們創建一個新項目並分析其結構：

# 創建Blazor WebAssembly 獨立應用
dotnet new blazorwasm -n MyFirstBlazorApp
#進入項目文件夾
cd MyFirstBlazorApp

使用Visual Studio 2022打開項目

🔍 關鍵文件詳細解析：

📄 wwwroot/index.html - 應用入口：

應用入口部分代碼

📄 Program.cs - 應用配置入口：

Program配置文件

運行和調試應用

▶️ 運行應用：

# 在項目目錄中運行
dotnet run

#使用熱重載（推薦用於開發）
dotnet watch run

運行效果圖

🐛 調試配置：

在 Properties/launchSettings.json 中配置啓動設置：

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "http://localhost:5116",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:7228;http://localhost:5116",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

🔧 調試步驟：

1. 在 Visual Studio 中按 F5 開始調試
2. 或在 VS Code 中按 F5 選擇".NET Core Launch"
3. 🎯 在代碼中設置斷點
4. 🔄 刷新瀏覽器觸發斷點

🔄 修改 Counter 組件體驗實時更新：

打開 Pages/Counter.razor，修改代碼：

@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>記數器</h1>
<p role="status">當前計數: @currentCount 🎰</p>
<button class="btn btn-primary" @onclick="IncrementCount">🚀 點擊我！(現在有表情！ 👍)</button>
@code {
    private int currentCount = 0;

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

計數器頁面運行效果圖

💾 保存文件後，瀏覽器將自動刷新顯示更改！

🎉 下一步行動

✅ 恭喜！ 你已經成功搭建了開發環境並創建了第一個 Blazor WebAssembly 應用。

📚 在下一部分中，我們將深入探討：

• Razor 組件的基礎知識
• 數據綁定和事件處理
• 組件生命週期

💪 練習建議：

1. 🎨 嘗試修改 Counter 組件的樣式
2. ➕ 添加一個新的頁面組件
3. ⚡ 實驗不同的按鈕點擊效果
4. 🔧 探索項目中的其他組件

示例源碼地址：https://pan.quark.cn/s/28c51d3480e2?pwd=rC8C

📅 本教程系列將持續更新，敬請關注下一章：Razor 組件基礎

🔔 提示： 如果在安裝或運行過程中遇到問題，請查看 .NET 官方文檔或在本教程的討論區提問！

微信公眾號：【.NET修仙日記】