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

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应用程序。