如何实现ASP.NET Core MVC ViewComponent获取数据后立即渲染

当前你的服务器端循环调用ViewComponent的方式，会导致所有组件必须等待最慢的数据库查询完成后才一起返回给前端渲染。要实现每个组件数据就绪后立即展示，需要改成前端异步加载+后端提供ViewComponent内容接口的模式，具体步骤如下：

1. 改造ViewComponent为异步实现 #

首先将ViewComponent的同步Invoke方法改为异步的InvokeAsync，并使用数据库异步查询方法（避免阻塞服务器线程）：

public async Task<IViewComponentResult> InvokeAsync(int order)
{
    List<string> dbItems;

    switch (order)
    {
        case 1:
            dbItems = await _yourDbContext.Table1.Select(item => item.Name).ToListAsync(); // 异步查询1
            break;
        case 2:
            dbItems = await _yourDbContext.Table2.Select(item => item.Title).ToListAsync(); // 异步查询2
            break;
        // 其他case的异步查询逻辑
        default:
            dbItems = await _yourDbContext.DefaultTable.Select(item => item.Content).ToListAsync();
            break;
    }

    return View(dbItems);
}

2. 创建返回ViewComponent内容的API端点 #

新增一个Controller（比如ComponentController），添加Action来返回指定ViewComponent的HTML内容：

public class ComponentController : Controller
{
    public async Task<IActionResult> ProductItem(int order)
    {
        // 调用ViewComponent并返回其HTML
        return await ViewComponent("ProductItem", new { order = order });
    }
}

3. 修改前端页面，异步加载每个组件 #

不再在服务器端渲染ViewComponent，而是先渲染空占位符，然后用JavaScript发起AJAX请求，每个组件请求完成后立即填充到页面中：

<div class="row">
    @for (int x = 1; x < 10; x++)
    {
        <div class="col-3" id="product-item-@x">
            <!-- 加载中提示，可自定义样式 -->
            <div class="p-3 text-center">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                加载中...
            </div>
        </div>
    }
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 并行发起所有组件的加载请求
    for (let order = 1; order < 10; order++) {
        const container = document.getElementById(`product-item-${order}`);
        
        fetch(`/Component/ProductItem?order=${order}`)
            .then(response => {
                if (!response.ok) throw new Error('请求失败');
                return response.text();
            })
            .then(html => {
                container.innerHTML = html;
            })
            .catch(err => {
                container.innerHTML = '<div class="p-3 text-danger">加载失败，请稍后重试</div>';
                console.error(`组件${order}加载失败:`, err);
            });
    }
});
</script>

关键说明 #

• 这种方式下，所有组件的数据库查询会并行执行（因为前端同时发起请求），耗时短的组件会先返回并渲染，耗时久的组件完成后再渲染，完全符合你的需求。
• 保留了ViewComponent的复用性，只是把渲染时机从服务器端调整为前端异步加载。
• 可以根据需求调整加载策略，比如先加载可视区域内的组件，其余滚动到视图再加载，进一步优化页面初始加载速度。

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