Blazor WebAssembly中如何在页面刷新时显示警告消息

Blazor WebAssembly本身没有原生的页面刷新拦截能力，需要借助浏览器的beforeunload事件来实现类似你示例图的警告效果，以下是具体实现方案：

基础实现（浏览器默认提示） #

这种方式会调用浏览器自带的警告弹窗，和你提供的示例效果一致，步骤如下：

1. 注入IJSRuntime
   因为需要调用浏览器的JS API，先在组件中注入：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

2. 注册/销毁事件监听器
   在组件生命周期中注册beforeunload事件，销毁时移除避免内存泄漏：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 注册beforeunload事件
        await JSRuntime.InvokeVoidAsync("window.addEventListener", "beforeunload", (EventCallback)HandleBeforeUnload);
    }
}

private void HandleBeforeUnload(EventArgs e)
{
    // 阻止默认行为，触发浏览器警告
    e.PreventDefault();
    // 部分浏览器需要返回值才能显示提示
    return;
}

// 组件销毁时移除事件
public async ValueTask DisposeAsync()
{
    await JSRuntime.InvokeVoidAsync("window.removeEventListener", "beforeunload", (EventCallback)HandleBeforeUnload);
}

自定义样式弹窗（进阶） #

如果想要完全自定义弹窗样式，需要额外处理（注意：现代浏览器限制beforeunload的自定义文本，这种方式需要手动控制页面刷新）：

Razor部分（自定义弹窗） #

@if (ShowConfirmModal)
{
    <div class="modal-backdrop">
        <div class="confirm-modal">
            <h3>确认离开？</h3>
            <p>未保存的更改将会丢失，确定要刷新页面吗？</p>
            <div class="modal-buttons">
                <button @onclick="ConfirmLeave" class="btn-confirm">确定</button>
                <button @onclick="CancelLeave" class="btn-cancel">取消</button>
            </div>
        </div>
    </div>
}

<style>
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.confirm-modal {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.modal-buttons {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-confirm {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-cancel {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}
</style>

C#逻辑部分 #

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

@code {
    private bool ShowConfirmModal { get; set; }
    private bool IsConfirmedLeave { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("window.addEventListener", "beforeunload", async (object args) =>
            {
                if (!IsConfirmedLeave)
                {
                    ShowConfirmModal = true;
                    StateHasChanged();
                    // 阻止浏览器默认提示
                    await JSRuntime.InvokeVoidAsync("Object.defineProperty", args, "returnValue", new { Value = "" });
                    return "";
                }
            });
        }
    }

    private async Task ConfirmLeave()
    {
        IsConfirmedLeave = true;
        ShowConfirmModal = false;
        // 手动触发页面刷新
        await JSRuntime.InvokeVoidAsync("location.reload");
    }

    private void CancelLeave()
    {
        IsConfirmedLeave = false;
        ShowConfirmModal = false;
    }

    public async ValueTask DisposeAsync()
    {
        await JSRuntime.InvokeVoidAsync("window.removeEventListener", "beforeunload", (EventCallback)HandleBeforeUnload);
    }

    private void HandleBeforeUnload(EventArgs e) { }
}

注意事项 #

• 基础实现的弹窗文本由浏览器控制，无法自定义（现代浏览器出于安全限制）
• 如果需要全站生效，可以把事件注册放在布局组件(MainLayout.razor)中
• 务必在组件销毁时移除事件监听器，避免内存泄漏

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