I use URL parameters for page state in my app.
How can i change the URL without actually navigating?
Thanks!
(using blazor server side)
5
-
1Is using js interop ok?Vencovsky– Vencovsky2020-03-02 19:52:58 +00:00Commented Mar 2, 2020 at 19:52
-
1Sure, but could you include how to use JavaScript interop?Tom Crosman– Tom Crosman2020-03-02 20:15:44 +00:00Commented Mar 2, 2020 at 20:15
-
3Can you elaborate your Q with code sample?dani herrera– dani herrera2020-03-02 20:52:08 +00:00Commented Mar 2, 2020 at 20:52
-
1give us code sample or scenarioAbdelrahman Gobarah– Abdelrahman Gobarah2020-03-03 06:51:12 +00:00Commented Mar 3, 2020 at 6:51
-
1Isn't there a way to not use the js nor NavigateTo to update the Url yet?AminM– AminM2021-05-20 13:39:02 +00:00Commented May 20, 2021 at 13:39
Add a comment
|
2 Answers
If you just want to add/remove/change query parameters in the URL, use the NavigationManager.NavigateTo method. It will not reload the page if it is not necessary (or not called with forceReload flag).
For example, the current URL is "https://example.com/page", then call NavigationManager.NavigateTo("https://example.com/page?id=1") will not reload the page but only modify URL. Click "Back" in browser will change the URL to "https://example.com/page", this change can be handled with NavigationManager.LocationChanged event.
10 Comments
Michel Jansson
The "problem" in this scenario with
NavigateTo is that it would actually navigate, and initialize the page/component matching that route again, which, as I understand it, the OP are looking to avoid.
gilm0079
I don't think that is true. The navigation manager NavigateTo performs client-side routing and only makes server calls when it is not a client-side route. My blazor app reads in query parameters then uses NavigateTo to clear the params from the Uri. This doesn't reload my blazor app.
user160357
Technically speaking, this is the right solution. The JS interop solution seems like a hack to me. Tested in Blazor .NET7, works perfectly and does not reload the page if it is not needed. Full URL not needed, something like this also works
navigationManager.NavigateTo("/counter/50");
Mushroomator
A practical tip: Since .NET 6 you can use the extension method
NavigationManager#GetUriWithQueryParameters() to create a URL based on the current URL with the required parameters set accoring to the values within the dictionary.
Sam
@Michel Jansson is right, I just had even a case like this in .net 8, it does reinitilize the component, even when you call
navigateTo(..., forceLoad: false) |
You can do this with JS Interop and call history.pushState(null, '', url)
Here is a simple example
.razor
@page "/"
@inject IJSRuntime jsRuntime
<input
@bind="url"
/>
<button @onclick="ChangeUrl">
Change Url
</button>
<p>@url</p>
@code {
[Parameter]
public string Url { get; set; }
void ChangeUrl(){
// You can also change it to any url you want
jsRuntime.InvokeVoidAsync("ChangeUrl", Url);
}
}
.js
window.ChangeUrl = function(url){
history.pushState(null, '', url);
}
Please notice that this only works for visual purpose, it will only change for the browser while in the server side, you probably won't see the change.
4 Comments
Tony
Would it get more correct if it use
jsRuntime.InvokeVoidAsync("ChangeUrl", Url); on this case,as the function does not return anything?
Daniil Palii
Take in account that, after changing URL with JS, when user hit "Back" button in a browser, the browser will change URL back but application state will not change. I recommend using the
NavigationManager.NavigateTo method. It will not reload the page if it is not necessary (or not called with forceReload flag). Then history will be handled properly and NavigationManager.LocationChanged event will be fired.
Luca Ziegler
Don't use JavaScript use NavigiationManager instead: learn.microsoft.com/en-us/dotnet/api/…
dandeto
This one-liner might be preferred:
await JSRuntime.InvokeVoidAsync("history.pushState", null, "", Url);. Since history is part of window already, you don't need to write a JS function to expose it.