.NET如何使用Blazor开发一个WebAssembly应用_Blazor WebAssembly开发教程

来源：这里教程网时间：2026-02-21 17:30:46 作者：

Blazor WebAssembly 是 .NET 提供的一种前端开发技术，允许你使用 C# 代替 JavaScript 来构建交互式网页应用。它直接在浏览器中运行 .NET 运行时（通过 WebAssembly），无需插件，所有代码都在客户端执行。下面是一个完整的入门指南，教你如何从零开始创建一个 Blazor WebAssembly 应用。

准备工作：安装开发环境

要开发 Blazor WebAssembly 应用，你需要安装以下工具：

.NET SDK（6.0 或更高版本）：推荐使用最新 LTS 版本（如 .NET 8） Visual Studio 2022 / VS Code / JetBrains Rider：任选其一作为开发工具

打开终端或命令提示符，运行以下命令检查是否已安装 .NET：

dotnet --version

如果没有安装，请前往 https://www.php.cn/link/c9f8941c38b7d49a586adf043f2acf21 下载并安装 SDK。

创建 Blazor WebAssembly 项目

使用 .NET CLI 创建新项目非常简单。在命令行中运行：

dotnet new blazorwasm -n MyBlazorApp

这会创建一个名为 MyBlazorApp 的新项目。进入项目目录：

cd MyBlazorApp
dotnet run

启动成功后，浏览器会自动打开并显示默认的 Blazor 模板页面，包含导航菜单、计数器示例和天气数据演示。

项目结构说明

Blazor WebAssembly 项目的典型结构如下：

wwwroot/：存放静态资源（CSS、JS、图片等） Pages/：Razor 页面组件（.razor 文件），如 Index.razor、Counter.razor Shared/：共享组件，如 NavMenu.razor、MainLayout.razor Program.cs：应用入口点，配置服务和依赖注入 App.razor：根组件，定义路由视图

Razor 组件结合了 HTML 和 C#，使用 @code{ } 块嵌入逻辑。

编写一个简单的自定义组件

在 Pages 文件夹中创建一个新的 Razor 组件 HelloWorld.razor：

@page "/hello"

Hello from Blazor!

当前时间：@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")

@message

@code {
private string message = "点击按钮刷新时间";

private void UpdateTime()
{
message = $"时间已更新：{DateTime.Now:T}";
}
}

保存后，在浏览器中访问 /hello 路径即可看到该页面。点击按钮会触发 C# 方法更新 UI。

处理 HTTP 请求与 API 调用

Blazor WebAssembly 可以调用后端 API。默认项目已注册 IHttpClientFactory 和 HttpClient。

例如，在 Program.cs 中已经包含：

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

你可以使用 HttpClient 获取 JSON 数据：

@using System.Text.Json
...
@code {
private WeatherForecast[] forecasts;

protected override async Task OnInitializedAsync()
{
try
{
forecasts = await Http.GetFromJsonAsync("sample-data/weather.json");
}
catch (Exception ex)
{
// 处理错误
}
}
}

其中 WeatherForecast 是一个简单的 C# 类，用于反序列化返回的数据。