Blazor InputSelect修改值时触发TypeError: o.parentNode is null错误求助

问题场景 #

使用Blazor的InputSelect组件绑定到NHibernate支持的字符串属性，新建对象时功能正常，但编辑现有对象并选择不同值时，触发Blazor内部错误，提示TypeError: o.parentNode is null。

Blazor InputSelect组件代码 #

<InputSelect class="form-select" @bind-Value="MdfAddressbook.FK_Cls_DefaultUserRole">
    <option value="@ClsUsersRoles.OBSERVER">@Localizer[LocalTranslations.GnrcText_Observer]</option>
    <option value="@ClsUsersRoles.SUBCONTRACTOR">@Localizer[LocalTranslations.GnrcText_Subcontractor]</option>
</InputSelect>

生成的HTML #

<select name="MdfAddressbook.FK_Cls_DefaultUserRole" class="form-select modified valid" _bl_f951b65f-1ea1-4713-8094-b4a2cb355ca0="">
    <option value="OBSERVER">Observer</option>
    <!--!-->
    <option value="SUBCONTRACTOR">Subcontractor</option>
</select>

NHibernate字段定义 #

private String _FK_Cls_DefaultUserRole = ClsUsersRoles.UNKNOWN;
public virtual String FK_Cls_DefaultUserRole
{
    get { return _FK_Cls_DefaultUserRole; }
    set { _FK_Cls_DefaultUserRole = value; }
}

错误日志 #

[2024-10-28T17:26:03.019Z] Error: There was an error applying batch 32. blazor.web.js:1:40375
    log https://localhost:7185/_framework/blazor.web.js:1
    processBatch https://localhost:7185/_framework/blazor.web.js:1
    startConnection https://localhost:7185/_framework/blazor.web.js:1
    _invokeClientMethod https://localhost:7185/_framework/blazor.web.js:1
    _processIncomingData https://localhost:7185/_framework/blazor.web.js:1
    onreceive https://localhost:7185/_framework/blazor.web.js:1
    onmessage https://localhost:7185/_framework/blazor.web.js:1
    (Asinc.: EventHandlerNonNull)
    connect https://localhost:7185/_framework/blazor.web.js:1
    connect https://localhost:7185/_framework/blazor.web.js:1
    _startTransport https://localhost:7185/_framework/blazor.web.js:1
    _createTransport https://localhost:7185/_framework/blazor.web.js:1
    _startInternal https://localhost:7185/_framework/blazor.web.js:1
    start https://localhost:7185/_framework/blazor.web.js:1
    _startInternal https://localhost:7185/_framework/blazor.web.js:1
    _startWithStateTransitions https://localhost:7185/_framework/blazor.web.js:1
    start https://localhost:7185/_framework/blazor.web.js:1
    startConnection https://localhost:7185/_framework/blazor.web.js:1
    startCore https://localhost:7185/_framework/blazor.web.js:1
    start https://localhost:7185/_framework/blazor.web.js:1
    or https://localhost:7185/_framework/blazor.web.js:1
    nr https://localhost:7185/_framework/blazor.web.js:1
    startCircutIfNotStarted https://localhost:7185/_framework/blazor.web.js:1
    resolveRendererIdForDescriptor https://localhost:7185/_framework/blazor.web.js:1
    determinePendingOperation https://localhost:7185/_framework/blazor.web.js:1
    refreshRootComponents https://localhost:7185/_framework/blazor.web.js:1
    rootComponentsMayRequireRefresh https://localhost:7185/_framework/blazor.web.js:1
    (Asinc.: setTimeout handler)
    rootComponentsMayRequireRefresh https://localhost:7185/_framework/blazor.web.js:1
    onDocumentUpdated https://localhost:7185/_framework/blazor.web.js:1
    Ki https://localhost:7185/_framework/blazor.web.js:1
    (Asinc.: EventListener.handleEvent)
    Ji https://localhost:7185/_framework/blazor.web.js:1
    <anonima> https://localhost:7185/_framework/blazor.web.js:1
    <anonima> https://localhost:7185/_framework/blazor.web.js:1
[2024-10-28T17:26:03.092Z] Error: System.AggregateException: One or more errors occurred. (TypeError: o.parentNode is null)

 ---&gt; System.InvalidOperationException: TypeError: o.parentNode is null

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)

   --- End of inner exception stack trace --- blazor.web.js:1:40375
    log https://localhost:7185/_framework/blazor.web.js:1
    unhandledError https://localhost:7185/_framework/blazor.web.js:1
    startConnection https://localhost:7185/_framework/blazor.web.js:1
    _invokeClientMethod https://localhost:7185/_framework/blazor.web.js:1
    _processIncomingData https://localhost:7185/_framework/blazor.web.js:1
    onreceive https://localhost:7185/_framework/blazor.web.js:1
    onmessage https://localhost:7185/_framework/blazor.web.js:1
    (Asinc.: EventHandlerNonNull)
    connect https://localhost:7185/_framework/blazor.web.js:1
    connect https://localhost:7185/_framework/blazor.web.js:1
    _startTransport https://localhost:7185/_framework/blazor.web.js:1
    _createTransport https://localhost:7185/_framework/blazor.web.js:1
    _startInternal https://localhost:7185/_framework/blazor.web.js:1
    start https://localhost:7185/_framework/blazor.web.js:1
    _startInternal https://localhost:7185/_framework/blazor.web.js:1
    _startWithStateTransitions https://localhost:7185/_framework/blazor.web.js:1
    start https://localhost:7185/_framework/blazor.web.js:1
    startConnection https://localhost:7185/_framework/blazor.web.js:1
    startCore https://localhost:7185/_framework/blazor.web.js:1
    start https://localhost:7185/_framework/blazor.web.js:1
    or https://localhost:7185/_framework/blazor.web.js:1
    nr https://localhost:7185/_framework/blazor.web.js:1
    startCircutIfNotStarted https://localhost:7185/_framework/blazor.web.js:1
    resolveRendererIdForDescriptor https://localhost:7185/_framework/blazor.web.js:1
    determinePendingOperation https://localhost:7185/_framework/blazor.web.js:1
    refreshRootComponents https://localhost:7185/_framework/blazor.web.js:1
    rootComponentsMayRequireRefresh https://localhost:7185/_framework/blazor.web.js:1
    (Asinc.: setTimeout handler)
    rootComponentsMayRequireRefresh https://localhost:7185/_framework/blazor.web.js:1
    onDocumentUpdated https://localhost:7185/_framework/blazor.web.js:1
    Ki https://localhost:7185/_framework/blazor.web.js:1
    (Asinc.: EventListener.handleEvent)
    Ji https://localhost:7185/_framework/blazor.web.js:1
    <anonima> https://localhost:7185/_framework/blazor.web.js:1
    <anonima> https://localhost:7185/_framework/blazor.web.js:1

可能的解决方法 #

1. 确保绑定值与选项值严格匹配 #

检查ClsUsersRoles的枚举值是否为字符串类型，确保FK_Cls_DefaultUserRole的赋值与选项的value属性完全一致，避免隐式类型转换导致的渲染异常。

2. 避免组件在渲染时被意外卸载 #

该错误通常是Blazor尝试更新已从DOM中移除的组件导致的，需检查模态框逻辑：

• 确认模态框的显示/隐藏逻辑不会在值变更时意外卸载InputSelect组件
• 确保模态框的状态管理（如Visible参数）稳定，不会在值绑定触发重渲染时被错误切换

3. 手动处理绑定事件替代双向绑定 #

替换@bind-Value为手动绑定，避免Blazor内部批处理更新冲突：

<InputSelect class="form-select" Value="@MdfAddressbook.FK_Cls_DefaultUserRole" ValueChanged="@OnRoleChanged" ValueExpression="@(() => MdfAddressbook.FK_Cls_DefaultUserRole)">
    <option value="@ClsUsersRoles.OBSERVER">@Localizer[LocalTranslations.GnrcText_Observer]</option>
    <option value="@ClsUsersRoles.SUBCONTRACTOR">@Localizer[LocalTranslations.GnrcText_Subcontractor]</option>
</InputSelect>

@code {
    private void OnRoleChanged(string value)
    {
        MdfAddressbook.FK_Cls_DefaultUserRole = value;
        // 如需验证或其他逻辑可在此添加
    }
}

4. 处理NHibernate代理对象问题 #

编辑现有对象时，MdfAddressbook可能是NHibernate生成的代理对象，可在编辑前转换为普通对象：

// 从数据库加载后转换为非代理对象
MdfAddressbook = session.Get<MdfAddressbook>(id);
MdfAddressbook = session.Merge(MdfAddressbook);

5. 更新Blazor版本 #

该错误可能是Blazor框架的已知bug，尝试升级到最新稳定版的ASP.NET Core Blazor，查看是否已修复相关DOM更新问题。

内容的提问来源于stack exchange，提问作者Guido De Vecchi