You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Blazor中Spinner加载完成后无法关闭/UI不更新的问题求助

Blazor中Spinner加载完成后无法关闭/UI不更新的问题求助

大家好,我现在在Blazor项目里遇到了一个棘手的问题,想请教下社区的各位大佬:

项目情况

我基于.NET 9.0.x、C#和Blazor默认项目开发,想在天气页面加载数据的时候显示一个加载Spinner,参考了现有的Spinner组件实现来做的。

问题现象

目前Spinner可以在数据开始加载时正常显示,但等数据加载完成后,调用Hide方法想关闭它,UI完全没反应——调试的时候明明看到HideLoadingSpinner()方法已经执行了,但界面上的Spinner就是不消失。

我的实现代码

天气页面的加载逻辑

在天气页面的OnParametersSetAsync方法里,我先调用显示Spinner,模拟加载后生成数据,再调用隐藏:

protected override async Task OnParametersSetAsync()
{
    _spinnerService.Show();// 这一步是正常的,Spinner能出来

    // 模拟异步加载耗时
    await Task.Delay(3000);

    var startDate = DateOnly.FromDateTime(DateTime.Now);
    var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };

    forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
    {
        Date = startDate.AddDays(index),
        TemperatureC = Random.Shared.Next(-20, 55),
        Summary = summaries[Random.Shared.Next(summaries.Length)]
    }).ToArray();

    _spinnerService.Hide();// 这里就不行了,UI完全不更新
}

Spinner组件的事件绑定

在Spinner.razor里,我绑定了服务的事件来控制显示隐藏:

protected override void OnInitialized()
{
    _spinnerService.OnShow += ShowLoadingSpinner;
    _spinnerService.OnHide += HideLoadingSpinner;
}

服务相关配置

  • SpinnerService已经注入到天气页面里了
  • 我也在program.cs里把它注册成了Scoped服务
  • 调试时能确认,不管是Show还是Hide的事件都触发了,HideLoadingSpinner()方法确实跑了一遍,但界面就是没变化

我试过的办法

我分别尝试了两种控制Spinner显示的方式:

  • 用一个IsVisible布尔标志来控制组件渲染
  • 给Spinner元素动态添加/移除hiddenCSS类
    但不管用哪种,调用Hide的时候UI都不更新,Spinner还是停在那里。

有没有大佬能帮我看看哪里出问题了?或者有没有其他解决思路?麻烦各位了!

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 06:53:01