Question

87

JS in blazor component

rated 0 times [ 89] [ 2] / answers: 1 / hits: 7963 / 4 Years ago, sat, august 1, 2020, 12:00:00

I am trying create an alert message in within a Blazor component. I have no idea how to do this. I am running ASP.NET Core 3.1 Blazor server-side. Here's what I've tried

Component function:

private async Task ShowAlert()

    {

        await JSRuntime.InvokeAsync<object>("ShowMsg");

    }

Javascript Interop:

function ShowMsg() {

    success = "Success!";

    return success; 

}

File host.cshtml:

 <script src="~/BlazorInterop.js"></script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dorothylorrainef

Add To Favorites

Follow

Total Points: 456

Total Questions: 102

Total Answers: 115

Location: El Salvador

Member since Sun, Sep 12, 2021

3 Years ago

dorothylorrainef questions

1 How to make a Discord embed with only 2 columns

Fri, Mar 5, 21, 00:00, 3 Years ago

1 Calling function after setState React hooks

Thu, Nov 26, 20, 00:00, 4 Years ago

1 Argument of type 'Function' is not assignable to parameter of type 'ComponentType< never>'

Wed, Nov 18, 20, 00:00, 4 Years ago

1 Cloning an array of objects in TypeScript

Mon, Sep 21, 20, 00:00, 4 Years ago

1 Unable to print javascript variable text in html inside a react component

Wed, Jul 22, 20, 00:00, 4 Years ago

View All

answered 4 Years ago charity · Accepted Answer

@page "/"



<button @onclick="MessageBox">Show Message</button>



@code

{

    [Inject] IJSRuntime JSRuntime { get; set; }

    protected async Task MessageBox()

    {

       await JSRuntime.InvokeVoidAsync("exampleJsFunctions.ShowMsg", 

                                                    "Hello Blazor");

     }

}

Put the following script tag beneath <script src="_framework/blazor.server.js"></script> in the _Host.cshtml file, like this:

<script src="_framework/blazor.server.js"></script>

<script>

    window.exampleJsFunctions =

    {

        ShowMsg: function (message) {

            window.alert(message);

        }

    };

</script>