Blazor javascript method cannot be called

Question

I am trying to call a javascript function from my Blazor component using JSinterop but I always get this error :

"Uncaught SyntaxError: Unexpected end of input".

Plus the javascript function is being called automatically when the page is fully laoded which is not the demanded behavior, because i want to trigger the function when a button is clicked.

@page "/jsInterop"
@inject IJSRuntime jsRuntime

<h3>JSinterop</h3>

<button type="button" class="btn btn-primary" 
 onclick="@setLocalStorage()">
    Trigger JavaScript Prompt
</button>

@code{

public object setLocalStorage()
{
    return jsRuntime.InvokeAsync<object>("interop.setItem", "username", 
"Aymen");
}
}


window.interop = {

    setItem: function (name, value) {

        window.localStorage[name] = value;
        return value;
    },

};

Might be removing parenthesis to function call setLocalStorage - onclick="@setLocalStorage" will work. — random
– random, Commented Jun 16, 2019 at 15:37
Hi @randomSoul , It doesnt Work , it rasises and error , and it says : cannot convert methdo group to none delegate type "object". — Haytham
– Haytham, Commented Jun 16, 2019 at 15:48

Chris Sainty · Accepted Answer · 2019-06-16 16:00:20Z

2

You have a syntax error where you have the onclick event

onclick="@setLocalStorage()"

Should be

@onclick=“@setLocalStorage”

All Blazor events now need to be prefixed with an @.

You also need to change the signature of your click handler and you should await the call.

public async Task setLocalStorage()
{
    await jsRuntime.InvokeAsync<object>("interop.setItem", "username", 
"Aymen");
}

edited Jun 16, 2019 at 16:00

answered Jun 16, 2019 at 15:51

Chris Sainty

8,5893 gold badges44 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Haytham Over a year ago

You forgot to add the "async" keyword in order to use "await " @Chris Sainty

Collectives™ on Stack Overflow

Blazor javascript method cannot be called

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related