Blazor单向绑定List属性更新时非路由组件UI未重渲染问题

问题特征 #

• 单向绑定的List/IEnumerable类型数据源在点击事件中完成赋值更新后，对应UI未刷新
• 相同代码逻辑的可路由组件（带@page特性）可正常触发重渲染，非路由组件表现不一致
• 未在事件回调中手动调用StateHasChanged()，预期Blazor会自动触发渲染但未生效

问题涉及组件原始代码：

@inherits Aivia.Bases.AltitudePage;

@inject IAlertService _alertService
@inject IJSRuntime _js;

@if (dsAlerts != null && dsAlerts.Any())
{
    <div class="alerts mt-3">
        <div class="container">
            @foreach (var dto in dsAlerts)
            {
                <div class="alert alert-primary p-3" role="alert">
                    <div class="row g-0">
                        <div class="col-auto icon">
                            <i class="fa-solid fa-comments"></i>
                        </div>
                        <div class="col">
                            <div class="title">
                                @dto.Title
                            </div>
                            
                            <div class="description">
                                @dto.Description
                            </div>

                            <div class="actions">
                                <button type="button" class="btn btn-primary" onclick="@(() => Read(dto))">
                                    <i class="fa-regular fa-circle-check me-2"></i>
                                    Dismiss
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
}

@code {

    private IEnumerable<dtoAlert> dsAlerts = Enumerable.Empty<dtoAlert>();

    protected override void OnInitialized()
    {
        GetAlerts();
    }

    private void GetAlerts()
    {
        this.dsAlerts = _alertService.queryUnreadAlerts(this.UserID).OrderBy(x => x.CreatedOn).ToList();
    }
    
    private void Read(dtoAlert dto)
    {
        _alertService.Read(this.UserID, dto.ID);
        GetAlerts();
    }
    
}

核心原因 #

Blazor 自动调用StateHasChanged()触发重渲染的前提是：逻辑执行在Blazor的UI事件管道内。代码里的按钮事件绑定用了原生onclick而非Blazor要求的@onclick，这部分回调不会被Blazor的事件生命周期追踪，执行完成后不会自动触发渲染。
可路由组件之所以表现正常，是因为路由切换、导航参数更新等全局事件会顺带触发这些组件重渲染，掩盖了事件绑定写法错误的问题；而非路由组件（尤其是放在布局页中的全局组件）没有额外的渲染触发契机，就会出现数据更新但UI不刷新的问题。
除此之外还有两个常见的诱因：

• 基类AltitudePage如果重写了ShouldRender()方法，存在非预期返回false的分支，会直接阻止组件重渲染
• 如果_alertService的方法是异步实现，同步调用会导致逻辑脱离Blazor同步上下文，后台线程完成的数据源赋值不会被Blazor感知

修复方案 #

1. 修正事件绑定写法，将原生onclick替换为Blazor事件指令@onclick，让回调进入Blazor事件管道，执行完成后自动触发渲染：

   <!-- 错误写法 -->
   <button type="button" class="btn btn-primary" onclick="@(() => Read(dto))">
   
   <!-- 正确写法 -->
   <button type="button" class="btn btn-primary" @onclick="@(() => Read(dto))">
   

2. 若服务层方法为异步实现，将调用逻辑改为异步写法，避免跨线程状态丢失：

   private async Task GetAlerts()
   {
       var alerts = await _alertService.queryUnreadAlerts(this.UserID);
       dsAlerts = alerts.OrderBy(x => x.CreatedOn).ToList();
   }
   
   private async Task Read(dtoAlert dto)
   {
       await _alertService.Read(this.UserID, dto.ID);
       await GetAlerts();
   }
   

3. 检查基类Aivia.Bases.AltitudePage的渲染逻辑，确认ShouldRender()没有非预期的渲染拦截规则。

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