CODEWITHSUNDEEP
browserblazorwebassemblylauncher
Gary Glanz
Gary Glanz

Reputation: 91

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

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

Upvotes: 6

Views: 15134

Answers (4)

chrisbyte
chrisbyte

Reputation: 1633

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

Upvotes: 3

Martin Andersen
Martin Andersen

Reputation: 2740

Why not just use the build in NavigationManager?

Navigation.NavigateTo(a_url, true);

The trick is to use the force parameter.

Happy coding.

Upvotes: -2

brakeroo
brakeroo

Reputation: 1447

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

Upvotes: 15

M K
M K

Reputation: 2157

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>

Upvotes: 0

Related Questions