C#中如何实现Blazor Server服务端渲染实战开发

Blazor Server是微软推出的基于ASP.NET Core的服务端渲染Web框架，它允许开发者使用C#代替JavaScript编写前端交互逻辑，通过SignalR建立客户端与服务端的实时连接，将UI渲染工作放在服务端完成，客户端仅负责接收DOM更新指令。这种模式下，C#代码可以直接访问服务端资源，同时减少了前端打包和浏览器兼容性问题。

Blazor Server核心工作原理

Blazor Server的运行依赖以下几个核心部分：

• SignalR连接：客户端与服务端建立持久化WebSocket连接，用于传输UI事件和DOM更新指令
• 服务端渲染引擎：在服务端维护组件的状态树，每次状态变更后计算DOM差异
• DOM更新推送：将计算出的DOM变更指令通过SignalR发送到客户端，由客户端浏览器执行更新

环境搭建与项目创建

首先需要安装.NET 6及以上版本的SDK，然后通过命令行创建Blazor Server项目：

// 创建Blazor Server项目
dotnet new blazorserver -o BlazorServerDemo
// 进入项目目录
cd BlazorServerDemo
// 启动项目
dotnet run

项目创建完成后，默认结构包含以下几个核心目录：

• Pages：存放页面组件，后缀为.razor
• Shared：存放共享组件，如导航栏、页脚等
• wwwroot：存放静态资源，如CSS、图片等
• Program.cs：项目入口文件，配置服务和中间件

实战：开发用户列表管理功能

1. 定义数据模型

首先创建用户数据模型类，用于承载用户数据：

// Models/User.cs
namespace BlazorServerDemo.Models
{
    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Email { get; set; } = string.Empty;
        public int Age { get; set; }
    }
}

2. 创建模拟数据服务

创建用户数据服务，提供数据的增删改查能力：

// Services/UserService.cs
using BlazorServerDemo.Models;

namespace BlazorServerDemo.Services
{
    public class UserService
    {
        private readonly List<User> _users = new()
        {
            new User { Id = 1, Name = "张三", Email = "test@ipipp.com", Age = 25 },
            new User { Id = 2, Name = "李四", Email = "test2@ipipp.com", Age = 30 }
        };

        public List<User> GetAllUsers()
        {
            return _users;
        }

        public void AddUser(User user)
        {
            user.Id = _users.Max(u => u.Id) + 1;
            _users.Add(user);
        }

        public void DeleteUser(int id)
        {
            var user = _users.FirstOrDefault(u => u.Id == id);
            if (user != null)
            {
                _users.Remove(user);
            }
        }
    }
}

3. 注册服务到容器

在Program.cs中注册用户服务，使其可以被组件注入使用：

// Program.cs
using BlazorServerDemo.Services;

var builder = WebApplication.CreateBuilder(args);

// 添加Blazor Server服务
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// 注册用户服务，生命周期为单例
builder.Services.AddSingleton<UserService>();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

4. 开发用户列表页面组件

在Pages目录下创建UserList.razor组件，实现用户列表展示和删除功能：

@page "/user-list"
@using BlazorServerDemo.Models
@using BlazorServerDemo.Services
@inject UserService UserService

<h3>用户列表</h3>

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var user in _users)
        {
            <tr>
                <td>@user.Id</td>
                <td>@user.Name</td>
                <td>@user.Email</td>
                <td>@user.Age</td>
                <td>
                    <button class="btn btn-danger btn-sm" @onclick="() => DeleteUser(user.Id)">
                        删除
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>

@code {
    private List<User> _users = new();

    protected override void OnInitialized()
    {
        // 组件初始化时加载用户数据
        _users = UserService.GetAllUsers();
    }

    private void DeleteUser(int id)
    {
        UserService.DeleteUser(id);
        // 重新加载数据刷新列表
        _users = UserService.GetAllUsers();
    }
}

5. 添加新增用户功能

在UserList.razor中添加新增用户的表单区域：

// 在表格上方添加新增表单
<h4>新增用户</h4>
<div class="row mb-3">
    <div class="col-md-3">
        <label class="form-label">姓名</label>
        <input type="text" class="form-control" @bind="newUser.Name" />
    </div>
    <div class="col-md-3">
        <label class="form-label">邮箱</label>
        <input type="email" class="form-control" @bind="newUser.Email" />
    </div>
    <div class="col-md-2">
        <label class="form-label">年龄</label>
        <input type="number" class="form-control" @bind="newUser.Age" />
    </div>
    <div class="col-md-2 align-self-end">
        <button class="btn btn-primary" @onclick="AddNewUser">
            添加
        </button>
    </div>
</div>

@code {
    // 新增用户相关代码补充
    private User newUser = new();

    private void AddNewUser()
    {
        if (string.IsNullOrEmpty(newUser.Name))
        {
            return;
        }
        UserService.AddUser(newUser);
        newUser = new User();
        _users = UserService.GetAllUsers();
    }
}

常见问题与注意事项

在Blazor Server开发过程中需要注意以下几点：

• SignalR连接断开后，用户状态会丢失，需要合理设计状态持久化方案
• 服务端的组件状态需要避免并发修改，单例服务要注意线程安全
• 复杂的DOM操作如果需要大量前端逻辑，可以结合JavaScript互操作实现
• 页面加载性能受SignalR连接延迟影响，首屏加载可以做适当的静态资源优化

通过以上实战流程，开发者可以快速掌握Blazor Server的核心开发模式，用C#完成全栈Web开发，大幅降低前后端技术栈切换的成本。实际项目中可以根据业务需求扩展更多功能，比如身份认证、数据持久化到数据库、复杂组件封装等。

Blazor_ServerC#服务端渲染ASP.NET_Core修改时间：2026-06-20 14:03:47