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

Question

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"?

Answer 1

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");

Answer 2

These are great answers and I took it one step further to make a re-usable component. My app uses anchors and link buttons so I have a quick-and-dirty switch for each.

ExternalLink.razor

@inject IJSRuntime JSRuntime

@if (Type == "link") 
{
    <a href="" @onclick="OpenWindow">@(Text ?? Url)</a>
}
else if (Type == "button") 
{
    <button type="button" class="btn btn-link" @onclick="OpenWindow">@(Text ?? Url)</button>
}

@code {
    [Parameter]
    public string Url { get; set; }

    [Parameter]
    public string Text { get; set; }

    [Parameter]
    public string Type { get; set; } = "link";

    private async Task OpenWindow() 
    {
        await JSRuntime.InvokeAsync<string>("open", Url, "_blank");
    }
}

Usage

<ExternalLink Url="https://www.ourwebsite.com/" Text="Visit Us!" />
<ExternalLink Url="https://stackoverflow.com/" />
<ExternalLink Url="https://duckduckgo.com/" Type="button" />