Blazor Server 7：如何让组件方法等待用户导航确认后再执行？

一、实现思路是否合理？ #

这个思路逻辑上完全合理——拦截未保存状态下的站内导航，通过确认弹窗避免用户误操作导致数据丢失，符合常规的用户体验设计。但要注意：绝对不能用同步阻塞的方式暂停OnBeforeInternalNavigation方法执行。Blazor Server采用单线程模型，同步阻塞会直接卡住UI线程，导致整个页面失去响应。必须用异步等待的方式处理用户交互，这才是适配Blazor运行机制的正确做法。

二、如何实现需求？事件是不是最佳方案？ #

事件可以实现，但不是最简洁的方案。更推荐用TaskCompletionSource配合自定义弹窗组件来实现，这种方式能更自然地贴合Blazor的异步编程模型，代码逻辑更清晰。

具体实现步骤 #

1. 编写自定义确认弹窗组件（ConfirmDialog.razor）

@if (IsVisible)
{
    <div style="position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center;">
        <div style="background:white; padding:20px; border-radius:8px;">
            <p>@Message</p>
            <div style="display:flex; gap:10px; justify-content:flex-end;">
                <button @onclick="Confirm" style="padding:8px 16px;">确认离开</button>
                <button @onclick="Cancel" style="padding:8px 16px;">取消</button>
            </div>
        </div>
    </div>
}

@code {
    [Parameter] public bool IsVisible { get; set; }
    [Parameter] public string Message { get; set; } = "您有未保存的更改，确定要离开吗？";
    [Parameter] public EventCallback OnConfirm { get; set; }
    [Parameter] public EventCallback OnCancel { get; set; }

    private async Task Confirm()
    {
        IsVisible = false;
        await OnConfirm.InvokeAsync();
    }

    private async Task Cancel()
    {
        IsVisible = false;
        await OnCancel.InvokeAsync();
    }
}

2. 在表单页面中集成NavigationLock和弹窗

@page "/edit-form"
@inject NavigationManager NavManager

<NavigationLock ConfirmExternalNavigation="@_hasUnsavedChanges" 
                OnBeforeInternalNavigation="HandleBeforeInternalNavigation" />

<ConfirmDialog @ref="_confirmDialog" 
               Message="您有未保存的表单内容，确定要跳转吗？"
               OnConfirm="OnConfirmNavigation"
               OnCancel="OnCancelNavigation" />

<!-- 示例表单 -->
<div style="padding:20px;">
    <input @bind="_formContent" @oninput="() => _hasUnsavedChanges = true" placeholder="输入内容..." />
    <button @onclick="SaveForm" style="margin-left:10px;">保存</button>
</div>

@code {
    private bool _hasUnsavedChanges;
    private string _formContent = string.Empty;
    private ConfirmDialog? _confirmDialog;
    private TaskCompletionSource<bool>? _navigationTaskSource;
    private string? _targetLocation;

    private async Task HandleBeforeInternalNavigation(NavigationContext context)
    {
        if (!_hasUnsavedChanges) return;

        // 先阻止当前导航
        context.PreventNavigation();
        _targetLocation = context.TargetLocation;

        // 显示弹窗并等待用户选择
        _navigationTaskSource = new TaskCompletionSource<bool>();
        _confirmDialog!.IsVisible = true;
        StateHasChanged(); // 强制更新UI显示弹窗

        // 等待用户操作结果
        var shouldNavigate = await _navigationTaskSource.Task;

        if (shouldNavigate)
        {
            // 用户确认，手动触发导航
            NavManager.NavigateTo(_targetLocation!);
            _hasUnsavedChanges = false;
        }
    }

    private async Task SaveForm()
    {
        // 模拟保存逻辑
        await Task.Delay(500);
        _hasUnsavedChanges = false;
    }

    private void OnConfirmNavigation()
    {
        _navigationTaskSource?.SetResult(true);
    }

    private void OnCancelNavigation()
    {
        _navigationTaskSource?.SetResult(false);
    }
}

方案说明 #

• 为什么不用事件？：事件可以实现，但需要手动维护导航状态、目标地址等关联信息，代码复杂度更高。而TaskCompletionSource可以将用户的弹窗交互直接转化为可等待的Task，逻辑更线性，更符合Blazor异步编程的习惯。
• 关键细节：必须先调用context.PreventNavigation()拦截默认导航，等待用户确认后再决定是否手动触发导航；显示弹窗后要调用StateHasChanged()强制更新UI，否则弹窗不会立即显示。

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