Handle Location Changing Events in Blazor 7.0

Blazor in .NET 7 now has support for handling location changing events. This allows you to warn users about unsaved work or to perform related actions when the user performs a page navigation.

To handle location changing events, register a handler with the NavigationManager service using the RegisterLocationChangingHandler method. Your handler can then perform async work on a navigation or choose to cancel the navigation by calling PreventNavigation on the LocationChangingContext. RegisterLocationChangingHandler returns an IDisposable instance that, when disposed, removes the corresponding location changing handler.

For example, the following handler prevents navigation to the counter page:

var registration = NavigationManager.RegisterLocationChangingHandler(async cxt =>
{
    if (cxt.TargetLocation.EndsWith("counter"))
    {
        cxt.PreventNavigation();
    }
});

Note that your handler will only be called for internal navigations within the app. External navigations can only be handled synchronously using the beforeunload event in JavaScript.

The new NavigationLock component makes common scenarios for handling location changing events simple.

<NavigationLock OnBeforeInternalNavigation="ConfirmNavigation" ConfirmExternalNavigation />

NavigationLock exposes an OnBeforeInternalNavigation callback that you can use to intercept and handle internal location changing events. If you want users to confirm external navigations too, you can use the ConfirmExternalNavigations property, which will hook the beforeunload event for you and trigger the browser-specific prompt. The NavigationLock component makes it simple to confirm user navigations when there’s unsaved data. Listing 1 shows using NavigationLock with a form that the user may have modified but not submitted.

<EditForm EditContext="editContext" OnValidSubmit="Submit">
    ...
</EditForm>
<NavigationLock OnBeforeInternalNavigation="ConfirmNavigation" ConfirmExternalNavigation />

    @code {
        private readonly EditContext editContext;
        ...

        // Called only for internal navigations.
        // External navigations will trigger a browser specific prompt.
        async Task ConfirmNavigation(LocationChangingContext context)
        {
            if (editContext.IsModified())
            {
                var isConfirmed = await JS.InvokeAsync<bool>("window.confirm", 
                   "Are you sure you want to leave this page?");
                
                if (!isConfirmed)
                {
                    context.PreventNavigation();
                }
            }
        }
    }

References
https://www.codemag.com/Article/2211102/Blazor-for-the-Web-and-Beyond-in-.NET-7

Related