.NET Core Web API 如何实现表格查询结果分块返回

完全可以通过.NET Core原生的异步流式响应能力实现需求，优先返回总条数、逐块推送数据的逻辑都可以支持，不需要额外引入第三方组件。

服务端实现步骤 #

核心依赖 #

ASP.NET Core 3.0+ 原生支持IAsyncEnumerable<T>的流式序列化，会自动将数据逐块写入响应流，不会等全量数据生成后才返回给客户端。

• 第一步：定义统一的分块响应结构，区分元数据（总条数）和数据块两种消息类型

public class ChunkedResponse<T>
{
    // 消息类型：0=元数据，1=数据块
    public int MessageType { get; set; }
    // 元数据场景返回总记录数
    public int? TotalCount { get; set; }
    // 数据块场景返回当前批次的数据集
    public List<T>? DataChunk { get; set; }
    // 标记是否为最后一块数据
    public bool IsLastChunk { get; set; }
}

• 第二步：编写流式接口，优先返回总条数，再分批返回数据
  示例采用NDJSON（换行分隔JSON）格式返回，避免前端解析半条JSON的问题：

[HttpGet("stream-table-data")]
public async Task StreamTableData()
{
    // 指定响应类型为换行分隔JSON，禁用响应缓存
    Response.ContentType = "application/x-ndjson";
    Response.Headers.CacheControl = "no-store";

    // 第一步：优先查询并返回总条数元数据
    var totalCount = await _yourDbContext.YourTable.CountAsync();
    var metaChunk = new ChunkedResponse<YourTableEntity>
    {
        MessageType = 0,
        TotalCount = totalCount,
        IsLastChunk = false
    };
    // 立即把元数据推送到前端
    await Response.WriteAsync(System.Text.Json.JsonSerializer.Serialize(metaChunk) + "\n");
    await Response.Body.FlushAsync();

    // 配置每块返回的行数，可根据业务调整为1000-5000
    const int chunkSize = 2000;
    var currentOffset = 0;

    while (true)
    {
        // 分页查询当前块数据，建议按主键排序避免分页偏移性能问题
        var dataChunk = await _yourDbContext.YourTable
            .OrderBy(x => x.Id)
            .Skip(currentOffset)
            .Take(chunkSize)
            .ToListAsync();

        if (!dataChunk.Any())
        {
            // 返回结束标记
            var endChunk = new ChunkedResponse<YourTableEntity>
            {
                MessageType = 1,
                IsLastChunk = true
            };
            await Response.WriteAsync(System.Text.Json.JsonSerializer.Serialize(endChunk) + "\n");
            await Response.Body.FlushAsync();
            break;
        }

        // 返回当前块数据
        var chunkResponse = new ChunkedResponse<YourTableEntity>
        {
            MessageType = 1,
            DataChunk = dataChunk,
            IsLastChunk = false
        };
        await Response.WriteAsync(System.Text.Json.JsonSerializer.Serialize(chunkResponse) + "\n");
        await Response.Body.FlushAsync();

        currentOffset += chunkSize;
    }
}

前端对接逻辑 #

• 不要用普通的一次性请求逻辑，通过Fetch API的ReadableStream逐块读取响应，实时追加数据到表格，全量加载完成后再启用筛选排序：

async function loadFullTableData() {
    const response = await fetch('/api/[你的Controller名]/stream-table-data');
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let buffer = '';
    let totalCount = 0;
    let fullData = [];
    let isFinished = false;

    // 初始禁用筛选、排序功能
    toggleFilterSort(false);

    while (!isFinished) {
        const { done, value } = await reader.read();
        if (done) break;

        // 拼接缓冲区，拆分完整的JSON行
        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop() || ''; // 剩余不完整的JSON留在缓冲区

        for (const line of lines) {
            if (!line.trim()) continue;
            const chunk = JSON.parse(line);
            if (chunk.messageType === 0) {
                // 拿到总条数，更新前端总数展示
                totalCount = chunk.totalCount;
                updateTotalCountText(totalCount);
            } else if (chunk.messageType === 1) {
                if (chunk.isLastChunk) {
                    isFinished = true;
                    // 全量加载完成，启用筛选排序
                    toggleFilterSort(true);
                    break;
                }
                // 追加当前块数据到表格展示
                appendDataToTable(chunk.dataChunk);
                fullData.push(...chunk.dataChunk);
                // 可选：更新加载进度
                updateLoadProgress((fullData.length / totalCount * 100).toFixed(0));
            }
        }
    }

    // 把全量数据挂到全局，供前端筛选、排序使用
    window.fullTableData = fullData;
}

注意事项 #

• 数据库分页查询要加排序规则，最好用主键、索引字段排序，避免大偏移量分页的性能问题
• 可以根据单条数据的大小调整chunkSize，平衡单块传输耗时和块的数量
• 前端可以添加网络异常重试逻辑，配合offset参数实现断点续传

内容的提问来源于stack exchange，提问作者trees_are_great