Blazor Navigationmanager cancel navigation on locationchanged

Question

Question:

Is there a way on Blazor to cancel navigation?

Let's supose a siple a href like this:

<a href="/some/other/blazor/spa/page">Go</a>

I would like to cancel navigation (for example if we are editing a form)

What I have tried.

Via JS

I set onbeforeunload dom delegate via JSInterop:

window.onbeforeunload = function(){
        return 'Vols abandonar aquesta pàgina?';
      };

but blazor bypass it.

Via locationchanged

I tried unsuccessfully to intercept navigation on locationchanged event:

@implements IDisposable
@inject NavigationManager NavigationManager

...

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

private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
{
    // Cancel Navigation Here
}

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

Peter Morris · Accepted Answer · 2020-07-31T20:59:49.150

5

Currently no, this feature is being discussed for .NET V5 - and has a community contribution pull-request so hopefully will make it in. https://github.com/dotnet/aspnetcore/pull/24417

The page is not changed when you navigate in Blazor, so there is no unload in order to trigger onbeforeunload.

edited Jul 31 '20 at 20:59

answered Jul 31 '20 at 10:04

Peter Morris

20,174
9
81
146

_"has a community contribution pull-request so hopefully will make it in."_ – dani herrera Jul 31 '20 at 11:53
1

short update to this: it's expected to be available with .net 6 – JoeGER94 Jan 15 '21 at 13:53
5

Unfortunately, it looks like this will be waiting until .net 7 at the soonest. – Mr.Technician Sep 30 '21 at 19:38
1

Hi Peter, maybe this feature is already available? https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0#handleprevent-location-changes – dani herrera Dec 21 '22 at 07:19

score 3 · Answer 2 · answered Mar 09 '23 at 12:30

3

This functionality was added in .NET 7, the documentation can be found in the 'Handle/prevent location changes' section of the 'Routing and navigation' page.

answered Mar 09 '23 at 12:30

tomRedox

28,092
24
117
154

Ogglas · Answer 3 · 2021-05-18T07:00:50.597

1

Update to @PeterMorris answer.

As of 2021-05-17 a location changing event for NavigationManger is now committed for .NET 6.0. I hope it will be possible to catch this event on a global level in the application.

https://github.com/dotnet/aspnetcore/issues/14962

edited May 18 '21 at 07:00

answered May 17 '21 at 21:52

Ogglas

62,132
37
328
418

1

@daniherrera Haha late night coding. Fixed it now :) – Ogglas May 18 '21 at 07:02

score -2 · Answer 4 · answered Aug 01 '20 at 16:39

-2

have you tried to put your js file in the index.html or _host.cshtml page ?

answered Aug 01 '20 at 16:39

raphadesa

349
1
5
11

Blazor Navigationmanager cancel navigation on locationchanged

Question:

What I have tried.

Via JS

Via locationchanged

4 Answers4

Linked