.NET 8 Blazor SSR页面从InteractiveServer返回后JS导航失效问题

问题原因 #

从InteractiveServer模式的Booking页通过NavigationManager.NavigateTo返回Home页时，Blazor采用客户端SPA导航，不会重新加载整个页面。你首次加载Home页时执行的jQuery事件绑定代码，只会在页面初次渲染时运行一次；当客户端导航回Home页后，新渲染的按钮元素没有被重新绑定点击事件，导致按钮失效。

解决方案 #

方案1：改用Blazor原生导航（推荐） #

SSR模式的Razor页面同样可以注入NavigationManager实现C#导航，完全兼容Blazor的导航机制，无需依赖JS：

@inject NavigationManager NavigationManager

<button @onclick="NavigateToBooking">前往预订页</button>

@code {
    private void NavigateToBooking()
    {
        NavigationManager.NavigateTo("/booking");
    }
}

方案2：使用jQuery事件委托 #

如果必须保留JS导航逻辑，将事件绑定改为事件委托，绑定到静态父元素（比如body），利用事件冒泡机制让动态生成的元素也能响应点击：

$('body').on('click', '#booking-btn', function () {
    window.location.href = '/booking';
});

方案3：导航完成后重新绑定事件 #

通过监听NavigationManager的LocationChanged事件，在页面导航完成后重新执行事件绑定：

1. 修改Home.razor代码：

@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime
@implements IDisposable

<button id="booking-btn">前往预订页</button>

@code {
    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

    private async void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        await InvokeAsync(StateHasChanged);
        await JSRuntime.InvokeVoidAsync("reBindBookingBtn");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("reBindBookingBtn");
        }
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

2. 在全局JS文件（比如wwwroot/js/site.js）中定义绑定函数：

function reBindBookingBtn() {
    // 先移除旧绑定避免重复触发
    $('#booking-btn').off('click');
    $('#booking-btn').on('click', function () {
        window.location.href = '/booking';
    });
}

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