C#进军前端：全面掌握Blazor WebAssembly，从零打造全栈C# Web应用

Blazor WebAssembly（简称Blazor Wasm）是Microsoft推出的一种使用C#和.NET进行Web前端开发的技术。它允许开发者使用C#编写客户端UI组件，运行在浏览器环境中，从而实现全栈C#开发。以下是从零开始逐步实现Blazor WebAssembly应用的深度解析与实战示例，包含详细的代码和注释。

一、环境准备

1. 安装.NET SDK：确保您已安装最新版本的.NET SDK（可通过https://dotnet.microsoft.com/download获取）。

2. 创建项目：打开命令行工具，执行以下命令创建一个新的Blazor WebAssembly项目：

Bash

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

这将创建一个名为

BlazorApp

的目录，其中包含一个基本的Blazor WebAssembly应用。

二、项目结构解析

创建的项目包含以下主要文件和目录：

• wwwroot：存放静态资源，如CSS、JavaScript文件和Blazor的WebAssembly二进制文件。
• Pages：包含Blazor页面（Razor组件），每个页面对应一个.razor文件。
• Shared：包含共享组件（如导航栏、页脚等）和通用样式。
• App.razor：应用程序的根组件，定义了应用程序的布局和导航。
• Program.cs：启动和配置Blazor应用。
• _Imports.razor：全局导入的命名空间和指令。

三、实战：创建简单页面与组件

1. 创建新页面

在

Pages

目录下创建一个名为

Counter.razor

的文件，内容如下：

Csharphtml

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

此页面包含一个计数器和一个按钮，点击按钮时调用

IncrementCount

方法增加计数。

2. 创建共享组件

在

Shared

目录下创建一个名为

CustomButton.razor

的组件，内容如下：

Csharphtml

<button class="custom-btn">@ChildContent</button>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

这是一个简单的自定义按钮组件，接受一个

RenderFragment

类型的

ChildContent

参数，用于插入按钮内部的内容。

3. 使用共享组件

修改

Counter.razor

，使用自定义按钮组件替换原有的按钮：

Csharphtml

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<CustomButton @onclick="IncrementCount">
    Click me
</CustomButton>

@code {
    private int currentCount = 0;

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

四、状态管理与服务注入

Blazor提供了内置的状态管理和依赖注入机制。以下是一个使用

StateContainer

服务存储和共享状态的示例：

1. 创建服务

在

Services

目录下创建

StateContainer.cs

：

Csharp

using System;

public class StateContainer
{
    public event Action OnChange;

    private int _count;
    public int Count
    {
        get => _count;
        set
        {
            if (_count != value)
            {
                _count = value;
                NotifyStateChanged();
            }
        }
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

2. 注册服务

打开

Program.cs

，在

builder.Services

中注册服务：

Csharp

builder.Services.AddSingleton<StateContainer>();

3. 使用服务

在

Counter.razor

中注入并使用

StateContainer

：

Csharphtml

@page "/counter"

@inject StateContainer State

<h1>Counter</h1>

<p>Current count: @State.Count</p>

<CustomButton @onclick="IncrementCount">
    Click me
</CustomButton>

@code {
    private void IncrementCount()
    {
        State.Count++;
    }
}

现在，计数器的状态由

StateContainer

服务统一管理，任何组件都可以通过注入该服务访问和修改状态。

五、总结

Blazor WebAssembly为C#开发者提供了一种全新的前端开发方式，允许使用C#编写高性能、可复用的Web UI组件。通过以上步骤，您已从零开始创建了一个简单的Blazor应用，涵盖了页面创建、组件开发、状态管理与服务注入等核心概念。随着对Blazor框架的深入学习和实践，您将能够充分利用C#的强大功能构建复杂的Web应用程序。