In blazor i use NavigationManager.NavigateTo(url)
in order to change window location, but how can I use it to open a new tab with a specified URL without having to invoke JS on OnAfterRenderAsync()
5 Answers
As of 21 of March 2019 there is no way of currently doing it directly with pure Blazor, you'll need to use JSInterop. Luckily this is easy enough to do. At the top of your .razor
file add
@inject IJSRuntime JSRuntime;
And then use it like so
await JSRuntime.InvokeAsync<object>("open", url, "_blank");
-
-
-
also the Js opens a new window only when i click somewhere inside the page, it does not execute automatically in method:
await JsRuntime.InvokeAsync<object>("open", new object[] { "https://google.com/", "_blank" });
– FlexyJul 7, 2020 at 12:28 -
You should be able to call the code anywhere, but I'd recommend
OnClick
because else most browsers will block it as it may not be a user initiated event Jul 7, 2020 at 12:39 -
2This does work, however eventually a TaskCanceledException will be thrown. I guess I can catch and ignore it, I am just wondering if there is a way to prevent the exception? Oct 7, 2020 at 9:00
Formerly, this code worked.
await _jsRuntime.InvokeVoidAsync("open", new object[2] { url, "_blank" });
At present, it now results in an uncaught exception:
> "TypeError: Converting circular structure to JSON
I found this behavior explained here (https://github.com/dotnet/aspnetcore/issues/16632):
This is because window.open returns a WindowProxy object (see https://developer.mozilla.org/en-US/docs/Web/API/Window/open). WindowProxy is not JSON-serializable, so can't be used as a return value to .NET code.
To fix this, don't call window.open directly, but instead call a JS function of your own that either returns nothing or returns something that is JSON-serializable.
Per the above recommendation, I added the following to index.html:
<script>
window.blazorOpen = (args) => {
window.open(args);
};
</script>
And modified my C# code-behind call to pass the window arguments:
await _jsRuntime.InvokeVoidAsync("blazorOpen", new object[2] { url, "_blank" });
Effectively we now avoid the issue by discarding the WindowProxy object returned by window.open, which was formerly returned to InvokeVoidAsync and .NET was attempting to (unsuccessfully) process.
You will get TypeError: Converting circular structure to JSON
when using
await _jsRuntime.InvokeVoidAsync("open", new object[2] { url, "_blank" });
or
await _jsRuntime.InvokeAsync<object>("open", url, "_blank");
This is because
window.open
returns aWindowProxy
object (see https://developer.mozilla.org/en-US/docs/Web/API/Window/open).WindowProxy
is not JSON-serializable, so can't be used as a return value to .NET code.
Taken from see here.
To get around this w/o using a javascript function, I use the following
await JSRuntime.InvokeVoidAsync("eval", $"let _discard_ = open(`{url}`, `_blank`)");
-
Thank you, it really helped though not sure if currently eval can be used (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)– Guru_07Aug 7, 2021 at 14:35
Just use a regular link
<a href="@Url" target="_blank">@UrlDescription</a>
-
i want to open a window from a C# function in blazor
@onclick
event handler– FlexyJul 7, 2020 at 13:43 -
-
it works now
@onclick="@(async ()=>await JSRuntime.InvokeAsync<object>("open", url, "_blank"))"
– FlexyJul 8, 2020 at 11:17 -
I'm confused by your design. You want them to click something but it can't be an element designed to do what you ask? Anyway, glad you are happy. Jul 8, 2020 at 11:21
-
well a link is generated by c# within that function and then user is redirected to that url– FlexyJul 8, 2020 at 12:07
Per the latest change in API here is the working solution where you can add any custom object attribute to the URL as shown below:
/// <summary>
/// Show Link
/// </summary>
/// <returns></returns>
private async Task ShowLink()
{
if (this.selectedItem != null)
{
string url = $"https://example.com/sites/" + this.selectedItem.Id + "/SitePages/Reports/somepage.aspx";
//NavigationManager.NavigateTo(url, false);//opens the new page on same browser tab
string[] values = { url, "_blank" };
CancellationToken token = new CancellationToken(false);
await JSRuntime.InvokeAsync<object>("open", token, values);//opens the link in new browser tab
}
}