.NET如何使用Blazor开发一个WebAssembly应用_Blazor WebAssembly开发教程-C#.Net教程-PHP中文网

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

幻夢星雲

发布： 2025-11-17 14:22:02

原创

821人浏览过

<p>Blazor WebAssembly 是 .NET 的前端技术，允许用 C# 替代 JavaScript 构建交互式网页。它通过 WebAssembly 在浏览器中运行 .NET 运行时，无需插件，所有代码在客户端执行。要开始开发，需安装 .NET SDK（推荐 6.0 或更高版本）及开发工具（如 Visual Studio、VS Code 等）。使用 dotnet --version 检查 .NET 是否安装，若未安装则从官网下载。通过命令 dotnet new blazorwasm -n MyBlazorApp 创建新项目，进入目录后运行 dotnet run 启动应用，浏览器将显示默认模板页面。项目结构包含 Pages（.razor 页面）、Shared（共享组件）、wwwroot（静态资源）、Program.cs（服务配置）和 App.razor（根组件）。Razor 组件结合 HTML 与 C#，逻辑写在 @code{ } 块中。可创建自定义组件如 HelloWorld.razor，设置路由 /hello，并通过按钮事件更新时间。应用支持调用 API，HttpClient 已预注册，可用 GetFromJsonAsync 获取数据并反序列化为 C# 对象。发布时使用 dotnet publish -c Release -o ./publish 生成静态文件，部署至 Nginx、IIS 或 GitHub Pages 等平台</p>

.net如何使用blazor开发一个webassembly应用_blazor webassembly开发教程

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")

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

@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# 类，用于反序列化返回的数据。