Blazor编辑表单的状态管理与页面导航阻止方案

首先得解决两个核心问题：准确判断表单是否真的处于脏状态（毕竟默认EditContext的IsModified太“死板”，改了又改回去也算脏），以及拦截所有可能的导航行为（包括内部路由跳转、浏览器返回/刷新/关闭标签）。

一、先搞定准确的脏状态判断 #

默认的EditContext.IsModified()逻辑很简单——只要字段被修改过，哪怕改回原值也会标记为已修改。我们得自己对比原始数据和当前数据，才能得到真正的“脏状态”：

1. 初始化表单时，深拷贝一份原始数据做基准：

private YourFormModel _currentModel;
private YourFormModel _originalModel;

protected override void OnInitialized()
{
    // 假设从后端或服务获取初始表单数据
    _currentModel = _dataService.GetInitialModel();
    // 用Json序列化实现深拷贝，避免引用类型的浅拷贝问题；复杂模型也可以用AutoMapper手动映射
    _originalModel = JsonSerializer.Deserialize<YourFormModel>(JsonSerializer.Serialize(_currentModel));
}

2. 写个自定义方法判断是否真的脏了：

private bool IsFormActuallyDirty()
{
    // 简单粗暴的对比方式：序列化后对比字符串，复杂模型可以改成字段逐个对比
    var currentJson = JsonSerializer.Serialize(_currentModel);
    var originalJson = JsonSerializer.Serialize(_originalModel);
    return currentJson != originalJson;
}

二、拦截Blazor内部路由导航 #

利用NavigationManager的LocationChanging事件，在跳转前检查表单状态：

1. 注入NavigationManager：

[Inject] private NavigationManager NavManager { get; set; }

2. 组件初始化时订阅事件，销毁时取消订阅（避免内存泄漏）：

private IDisposable _navSubscription;

protected override void OnInitialized()
{
    // 其他初始化逻辑...
    _navSubscription = NavManager.LocationChanging += HandleLocationChanging;
}

public void Dispose()
{
    _navSubscription?.Dispose();
}

3. 实现拦截逻辑，弹出确认框：

private void HandleLocationChanging(object sender, LocationChangingEventArgs e)
{
    if (IsFormActuallyDirty())
    {
        // 这里用你项目里的UI组件弹窗，比如MudBlazor的MudDialog、Radzen的Dialog，或者原生JS confirm
        var userConfirmed = MessageBox.Show("您有未保存的修改，确定要离开吗？", "确认离开", MessageBoxButtons.YesNo) == DialogResult.Yes;
        if (!userConfirmed)
        {
            // 取消导航
            e.Cancel = true;
        }
    }
}

三、拦截浏览器原生导航（返回/刷新/关闭） #

这种情况得靠浏览器的beforeunload事件，通过JSInterop实现：

1. 组件里的C#代码：

[Inject] private IJSRuntime JSRuntime { get; set; }
private DotNetObjectReference<YourComponent> _dotNetRef;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _dotNetRef = DotNetObjectReference.Create(this);
        await JSRuntime.InvokeVoidAsync("registerBeforeUnloadListener", _dotNetRef);
    }
}

[JSInvokable]
public bool CheckFormDirtyStatus()
{
    return IsFormActuallyDirty();
}

public async ValueTask DisposeAsync()
{
    await JSRuntime.InvokeVoidAsync("unregisterBeforeUnloadListener");
    _dotNetRef?.Dispose();
}

2. 在wwwroot/script.js里加对应的JS逻辑：

let unloadHandler = null;

function registerBeforeUnloadListener(dotNetRef) {
    unloadHandler = (event) => {
        const isDirty = dotNetRef.invokeMethod('CheckFormDirtyStatus');
        if (isDirty) {
            // 浏览器会自动弹出默认确认框，自定义文本在多数现代浏览器里不生效，不用纠结
            event.preventDefault();
            event.returnValue = '';
        }
    };
    window.addEventListener('beforeunload', unloadHandler);
}

function unregisterBeforeUnloadListener() {
    if (unloadHandler) {
        window.removeEventListener('beforeunload', unloadHandler);
        unloadHandler = null;
    }
}

四、几个注意点 #

• 深拷贝要到位：如果你的模型有嵌套的引用类型，一定要用深拷贝，不然修改子对象时原始模型也会跟着变，导致脏状态判断失效。
• 清理资源：组件销毁时务必取消所有事件订阅和JS监听，避免内存泄漏。
• 浏览器兼容性：beforeunload的自定义提示文本在Chrome、Edge等浏览器里被限制，只能显示浏览器默认内容，不用浪费时间自定义。

内容的提问来源于stack exchange，提问作者MrC aka Shaun Curtis