.NET MVC如何将API获取的对象数据流式传输至视图？

当然可以实现流式传输！在.NET MVC里，完全不用等所有数据加载完再返回视图——咱们可以通过响应流式传输、实时推送这类思路来做到逐条展示数据。下面给你分享几种实用的方案：

这个方案最直接，不需要额外依赖，直接在Action里逐步向浏览器推送内容，前端实时渲染。

首先修改你的Action，禁用响应缓存，然后分批次写入内容：

public async Task<ActionResult> Index()
{
    // 关键：关闭响应缓存，让内容实时发送到浏览器
    Response.BufferOutput = false;
    Response.ContentType = "text/html";

    // 先输出页面的基础结构，包括前端渲染逻辑
    await Response.WriteAsync(@"
        <!DOCTYPE html>
        <html>
        <head><title>实时加载数据</title></head>
        <body>
        <h1>正在实时加载的数据</h1>
        <div id='data-list'></div>
        <script>
            // 定义追加数据的方法
            function addDataItem(content) {
                const list = document.getElementById('data-list');
                const item = document.createElement('div');
                item.className = 'data-item';
                item.textContent = content;
                list.appendChild(item);
            }
        </script>
    ");

    using (var client = new HttpClient())
    {
        for (var i = 0; i < 1000000; i++)
        {
            // 调用API获取单条数据
            var response = await client.GetFromJsonAsync<ResponseData>("你的API地址");
            
            // 把数据转成前端可执行的脚本，实时追加到页面
            const dataScript = $"<script>addDataItem('{JsonSerializer.Serialize(response)}');</script>";
            await Response.WriteAsync(dataScript);
            
            // 强制把缓冲区内容推送给浏览器
            await Response.FlushAsync();
            
            // 可选：加个小延迟，方便看到实时加载的效果
            await Task.Delay(10);
        }
    }

    // 输出页面结尾
    await Response.WriteAsync("</body></html>");
    return new EmptyResult();
}

⚠️ 注意：

• 必须设置Response.BufferOutput = false，否则内容会被缓存到服务器，直到全部生成完才发送。
• 前端通过嵌入的<script>标签动态渲染，因为浏览器会逐步解析流式传输的HTML内容。

如果你的场景需要更灵活的双向通信，或者数据更新频率更高，SignalR是更好的选择——它支持WebSocket、Server-Sent Events等多种传输方式，兼容性强。

步骤1：安装SignalR包 #

如果是.NET Core MVC，运行NuGet命令：

Install-Package Microsoft.AspNetCore.SignalR

步骤2：创建SignalR Hub类 #

public class DataStreamHub : Hub
{
    // 定义推送数据的方法
    public async Task PushData(ResponseData data)
    {
        await Clients.Caller.SendAsync("ReceiveData", data);
    }
}

步骤3：配置SignalR服务（Startup.cs） #

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    // 其他服务配置...
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 中间件配置...
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<DataStreamHub>("/dataStreamHub");
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}

步骤4：控制器处理API调用并推送数据 #

// 展示视图的Action
public async Task<ActionResult> Index()
{
    return View();
}

// 后台执行数据获取和推送的Action
public async Task<IActionResult> StartStreaming()
{
    var hubContext = HttpContext.RequestServices.GetRequiredService<IHubContext<DataStreamHub>>();
    using (var client = new HttpClient())
    {
        for (var i = 0; i < 1000000; i++)
        {
            var response = await client.GetFromJsonAsync<ResponseData>("你的API地址");
            // 推送给当前连接的客户端
            await hubContext.Clients.All.SendAsync("ReceiveData", response);
            await Task.Delay(10);
        }
    }
    return Ok();
}

步骤5：视图中连接SignalR并渲染数据 #

@{
    ViewData["Title"] = "实时数据推送";
}
<h1>SignalR实时数据展示</h1>
<div id="data-container"></div>

<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script>
    // 建立SignalR连接
    const connection = new signalR.HubConnectionBuilder()
        .withUrl("/dataStreamHub")
        .build();

    // 接收服务器推送的数据并渲染
    connection.on("ReceiveData", function (data) {
        const container = document.getElementById('data-container');
        const item = document.createElement('div');
        item.textContent = JSON.stringify(data);
        container.appendChild(item);
    });

    // 启动连接后触发后台数据推送
    connection.start().then(function () {
        fetch('/Home/StartStreaming');
    }).catch(function (err) {
        console.error('连接失败:', err);
    });
</script>

如果只需要单向的实时数据传输，SSE是更轻量的选择，不需要额外依赖，浏览器原生支持。

控制器Action #

public async Task<ActionResult> StreamWithSSE()
{
    // 设置SSE的响应头
    Response.ContentType = "text/event-stream";
    Response.Headers.Add("Cache-Control", "no-cache");
    Response.Headers.Add("Connection", "keep-alive");

    using (var client = new HttpClient())
    {
        for (var i = 0; i < 1000000; i++)
        {
            var response = await client.GetFromJsonAsync<ResponseData>("你的API地址");
            const jsonData = JsonSerializer.Serialize(response);
            // SSE格式要求：data: 内容\n\n
            await Response.WriteAsync($"data: {jsonData}\n\n");
            await Response.FlushAsync();
            await Task.Delay(10);
        }
    }
    return new EmptyResult();
}

视图中监听SSE #

<div id="data-list"></div>
<script>
    // 建立SSE连接
    const eventSource = new EventSource('/Home/StreamWithSSE');
    
    // 接收数据并渲染
    eventSource.onmessage = function(event) {
        const data = JSON.parse(event.data);
        const list = document.getElementById('data-list');
        const item = document.createElement('div');
        item.textContent = JSON.stringify(data);
        list.appendChild(item);
    };

    // 处理连接错误
    eventSource.onerror = function(error) {
        console.error('SSE连接异常:', error);
        eventSource.close();
    };
</script>

• 对于100万条数据的场景，尽量优化API调用方式（比如批量获取），避免单条调用的性能开销。
• 流式传输会保持HTTP连接打开，要注意服务器的连接数限制，避免资源耗尽。
• 如果是传统.NET Framework MVC（非Core），部分API会有差异（比如Response.Flush()是同步方法），需要调整为异步兼容的写法。

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