How do I open a browser window/tab from blazor webassembly project behind code:

2
votes

I'm converting a UWP app to Blazor WebAssembly with ASP.NET Core hosted.

I have my markup code in Index.razor and behind code in Index.razor.cs.

In the UWP project I opened a browser window from an onclick function like this:

var success = Windows.System.Launcher.LaunchUriAsync(targetPage);

What can I use in my Blazor project onclick event, that won't lead to "unhandled error has occurred"?

3
browserblazorwebassemblylauncher
You'll need to use JS interop for this. – enet
Maybe you can use a <a target="_blank" instead ? – agua from mars
these should be answers. For the js interop - window.open(url) is your friend. – rdmptn

3 Answers

5
votes

You can open a tab by making use of the 'window.open' function:

@inject IJSRuntime JSRuntime;
....
await JSRuntime.InvokeAsync<string>("open", $"https://www.mysite/mypage", "_blank");

if the page is internal to your website you can use the base uri:

@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime;
...
await JSRuntime.InvokeAsync<string>("open", $"{Navigation.BaseUri}/mypage", "_blank");
0
votes

You case use below way

razor file

JSRuntime.InvokeVoidAsync("OpenWindow");

html file

<script>
        function OpenWindow() {
            window.open('https://www.google.com', 'Test', 'width=800,height=860,scrollbars=no,toolbar=no,location=no');
            return false
        }
        </script>
-1
votes

Why not just use the build in NavigationManager?

Navigation.NavigateTo(a_url, true);

The trick is to use the force parameter.

Happy coding.