Razor页面异步数据加载问题：页面先渲染导致数据未显示

嘿，我一眼就发现问题所在啦——你的OnGetAsync方法用了async void返回类型，这正是页面没等API数据加载完就提前渲染的核心原因！

问题根源 #

在ASP.NET Core Razor Pages中，异步的页面处理方法必须返回Task类型。如果用async void，ASP.NET Core框架没办法追踪这个异步操作的完成状态，会直接跳过等待步骤，继续执行页面渲染逻辑。这时候你的Values列表还没被API返回的数据填充，页面自然显示不出内容。

修正后的PageModel代码 #

只需要把OnGetAsync的返回类型从async void改成async Task就行，其他逻辑完全不用动：

public class About : PageModel 
{ 
    private ServiceProxy serviceProxy; 

    public About(ServiceProxy serviceProxy) 
    { 
        this.serviceProxy = serviceProxy; 
    } 

    public IEnumerable<ProductViewModel> Values { get; set; } 

    // 把async void改成async Task
    public async Task OnGetAsync() 
    { 
        this.Values = await this.serviceProxy.GetValuesAsync(); 
    } 
}

额外优化：添加加载状态（可选） #

如果你的API响应确实很慢，为了提升用户体验，可以在Razor页面里加个加载提示，等数据加载完成后再显示内容：

@page
@model About
@{
    ViewData["Title"] = "About";
}

<h2>@ViewData["Title"]</h2>
<h3>@Model.Message</h3>

@if (Model.Values == null)
{
    <p>正在加载产品数据...</p>
}
else
{
    @foreach (var product in Model.Values)
    {
        <p>@product.Name</p>
    }
}

这样修改后，框架会等待OnGetAsync里的API调用完成，再渲染页面，你的产品数据就能正常显示啦！

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