Blazor页面启动后无响应卡死问题排查与解决

核心故障原因 #

页面卡死是Blazor组件渲染死锁+UI线程阻塞导致，具体触发点有3个：

1. 序列号输入框@bind-value默认绑定oninput事件，每输入1个字符就会触发StrSerialNumber的setter执行，setter中直接调用TextChangedEvetFotCleaning()方法，若该方法触发组件重渲染、或修改绑定值，会形成「输入事件→setter触发→重渲染→值比对→再次触发setter」的无限循环，直接占满UI渲染线程。
2. 属性setter缺少值相等判断，哪怕输入值没变化也会重复执行业务逻辑，放大渲染压力。
3. 绑定的CheckTheSerial()点击事件未做异步处理，若方法内用同步方式调用接口、查询数据库，会直接阻塞UI线程，点击后页面直接锁死。

分步修复操作 #

• 修复属性setter逻辑，移除setter中的业务调用，新增值相等判断避免重复触发：

private string serial;
public String StrSerialNumber
{
    get => serial;
    set
    {
        // 值无变化时直接返回，阻断无效重复执行
        if (serial == value) return;
        serial = value;
        // 移除setter中的TextChangedEvetFotCleaning调用，属性setter仅做值赋值
    }
}

• 调整输入框绑定触发时机，将高频的输入时触发改为输入完成失焦时触发，减少无效渲染：

<input type="text" @bind-value="@StrSerialNumber" @bind-value:event="onchange" placeholder="SerialNumber">

• 补全点击事件的异步逻辑，禁止同步阻塞UI线程，正确处理加载状态：

private async Task CheckTheSerial()
{
    // 空值直接拦截
    if (string.IsNullOrWhiteSpace(StrSerialNumber))
    {
        prodSrCls.Responses.Statue = LosacoWeb.Shared.Enumes.StatueResponse.Failed;
        return;
    }
    try
    {
        IsSaveLoading = true;
        // 输入变更后的清理逻辑放到点击事件中执行，避免setter循环
        TextChangedEvetFotCleaning();
        // 必须用await异步调用核验接口，严禁用.Wait()、.Result等同步阻塞写法
        prodSrCls = await _Reception.CheckSerialNumber(StrSerialNumber);
        
        if (OnFindSerial.HasDelegate)
        {
            await OnFindSerial.InvokeAsync(prodSrCls);
        }
    }
    catch
    {
        prodSrCls.Responses.Statue = LosacoWeb.Shared.Enumes.StatueResponse.Failed;
    }
    finally
    {
        IsSaveLoading = false;
        StateHasChanged();
    }
}

• 修正TextChangedEvetFotCleaning方法逻辑，方法内仅重置核验状态，禁止修改StrSerialNumber绑定值，避免触发循环：

private void TextChangedEvetFotCleaning()
{
    // 仅清空之前的核验结果，不要改动输入框绑定的序列号值
    if (prodSrCls.Responses.Statue != LosacoWeb.Shared.Enumes.StatueResponse.NoStatus)
    {
        prodSrCls = new ProdSerialClasses();
    }
}

验证注意点 #

修复后重新发布站点，先测试输入序列号过程中页面无卡顿，再点击测试按钮，确认加载动画正常显示、核验结果能正常渲染即可。所有Blazor组件中的异步调用必须搭配await使用，同步等待异步结果的写法会直接造成同步上下文死锁，锁死整个页面。

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