.NET 9升级至.NET 10后Blazor InteractiveServer绑定异常问题

问题场景 #

将ASP.NET Core Blazor应用从.NET 9升级到.NET 10后，InteractiveServer模式下出现以下异常：

• 自定义Button组件点击时会弹出内置确认弹窗
• 第二次点击该按钮时，弹窗的Message参数变为空值，此问题仅在升级后出现

相关代码片段 #

页面中Button组件的使用 #

<Button Id="CreateAndSendButton" OnClick="ShowCreateDialog" Enabled="CanCreate" Style="ButtonStyle.Secondary">Create and Send</Button>

Button.razor核心代码 #

<button type="@Type.ToString()" id="@Id" class="@($"text-nowrap {_cssClass}")" @onclick="Submit" disabled="@(!Enabled)" title="@ToolTip" form="@Form">
    <i class="@IconClass"></i>
</button>

@if (!string.IsNullOrEmpty(ConfirmationMessage))
{
    <ModalDialog @ref="_confirmationDialog" id="@($"{@Id}_ConfirmationDialog")" Title="@ConfirmationTitle" Message="@ConfirmationMessage" OnSubmit=@SubmitConfirmed ShowSubmitButton="true" SubmitButtonText="Yes" ShowCloseButton="true" CloseButtonText="No">
    </ModalDialog>
}

Button组件的点击与Submit逻辑 #

private async Task ShowCreateDialog()
{
    var result = await called Service;

    if (result.Success)
    {
        await ReloadData();
    }
}

private async Task ReloadData()
{
    await InvokeAsync(StateHasChanged);
}

private async Task Submit()
{
    await _confirmationDialog.Show();
}

ModalDialog核心代码 #

[Parameter] 
public string Message { get; set; }

[Parameter] 
public EventCallback OnSubmit { get; set; }

public async Task Show()
{
    await InvokeAsync(StateHasChanged);
}

问题原因分析 #

.NET 10对InteractiveServer模式下的组件状态管理、参数绑定逻辑做了优化调整，可能导致以下情况：

1. 条件渲染（@if (!string.IsNullOrEmpty(ConfirmationMessage))）导致弹窗组件实例被复用或销毁重建，参数未重新绑定
2. StateHasChanged调用时机不对，弹窗组件未及时获取最新的Message值
3. 组件状态保留机制（新增于.NET 10）导致旧参数被缓存

解决方案 #

方案1：替换条件渲染为显式可见性控制 #

去掉弹窗的条件渲染逻辑，改用Visible参数控制显示/隐藏，避免组件实例异常：

1. 修改Button.razor中的弹窗部分：

<ModalDialog @ref="_confirmationDialog" 
             id="@($"{@Id}_ConfirmationDialog")" 
             Title="@ConfirmationTitle" 
             Message="@ConfirmationMessage" 
             OnSubmit=@SubmitConfirmed 
             ShowSubmitButton="true" 
             SubmitButtonText="Yes" 
             ShowCloseButton="true" 
             CloseButtonText="No"
             Visible="@_isDialogVisible">
</ModalDialog>

2. 在Button组件中添加状态字段与逻辑：

private bool _isDialogVisible;

private async Task Submit()
{
    _isDialogVisible = true;
    await InvokeAsync(StateHasChanged);
    await _confirmationDialog.Show();
}

// 弹窗关闭时重置状态（需在ModalDialog中添加关闭回调）
private void HandleDialogClose()
{
    _isDialogVisible = false;
    InvokeAsync(StateHasChanged);
}

3. 给ModalDialog添加Visible参数以控制显示：

[Parameter]
public bool Visible { get; set; }

方案2：显式更新弹窗Message参数 #

在显示弹窗前，直接给弹窗组件赋值最新的ConfirmationMessage，绕过参数绑定的延迟：

private async Task Submit()
{
    if (_confirmationDialog != null)
    {
        _confirmationDialog.Message = ConfirmationMessage;
        await _confirmationDialog.Show();
    }
}

方案3：调整组件状态保留配置 #

检查Program.cs中的InteractiveServer组件配置，关闭不必要的状态保留：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents(options =>
    {
        options.PersistComponentStateMode = PersistComponentStateMode.Disabled;
    });

方案4：优化StateHasChanged调用时机 #

确保Button组件先刷新状态，再触发弹窗显示：

private async Task Submit()
{
    // 先刷新Button组件状态，确保弹窗参数已更新
    await InvokeAsync(StateHasChanged);
    await _confirmationDialog.Show();
}

同时调整ModalDialog的Show方法：

public async Task Show()
{
    await InvokeAsync(() => StateHasChanged());
}

总结 #

该问题源于.NET 10对InteractiveServer模式组件渲染逻辑的调整，核心解决思路是确保弹窗组件在每次显示时都能获取到最新的Message参数，避免条件渲染或状态缓存导致的参数过期。

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