Detect query string value change in component in blazor web assembly.

[TanvirArjel]

For say, I have the following URL for the product page:

https://localhost:44389/products

If it is changed to https://localhost:44389/products?pageIndex=2 on pagination click, is there any way to detect this change from Component partial class without onclick event on pagination anchor tag?

I have search a lot but unfortunately did not find anything.

Thank you.

I am expecting something as follows:

public class partial Products
{
    protected override async Task OnQueryStringChangeAsync()
    {
             ............
    }
}

[mrpmorris]

There is an event you can subscribe to on NavigationManager if you inject that.

[TanvirArjel]

@mrpmorris If possible please write some example code.

[mkArtakMSFT]

Thanks for contacting us. This will also be simplified by #22388

[captainsafia]

@TanvirArjel You can leverage the LocationChanged API on the NavigationManager as mentioned above. You can use the following code in your component to achieve your goal:

@code {
    protected override void OnInitialized()
    {
        Navigation.LocationChanged += NavigationManager_LocationChanged;
    }

    private void NavigationManager_LocationChanged(object sender, LocationChangedEventArgs e)
    {
        var url = e.Location;
        // Parse URL for query string here
    }

    void IDisposable.Dispose() => Navigation.LocationChanged -= NavigationManager_LocationChanged;
}

The issue linked above tracks making it easier to extract query strings from the URL. For now, you can manually parse it as indicated above.