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 等平台

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 MyBlazorAppdotnet 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")
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言,而是一种使用现有标准的新方法,最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容,不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
@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
}
catch (Exception ex)
{
// 处理错误
}
}
}
其中 WeatherForecast 是一个简单的 C# 类,用于反序列化返回的数据。
部署 Blazor WebAssembly 应用
发布前先构建生产版本:
dotnet publish -c Release -o ./publish生成的文件位于 publish/wwwroot 目录中,可部署到任何静态文件服务器(如 Nginx、IIS、GitHub Pages、Azure Static Web Apps 等)。
注意:Blazor WebAssembly 是单页应用(SPA),需确保服务器配置为将所有未知路径重定向到 index.html,以支持路由功能。
基本上就这些。掌握以上内容后,你可以进一步学习状态管理、身份认证(如 Azure AD、Auth0)、JavaScript 互操作、组件库集成等高级特性。Blazor WebAssembly 让 .NET 开发者能用熟悉的语言构建现代前端应用,适合中小型 SPA 项目或企业内部系统。









