Uncaught Reference error when calling method via onclick in Razor Pages

Question

I have this code in file.cshtml

<button onclick="funcaoClique()" >OnClickTest</button>

And I try call this method in file.cshtml.cs

public void funcaoClique()
{
    Console.Write("Hello")
}

When I click the button it gives me the following error in the console:

Uncaught ReferenceError: funcaoClique is not defined at HTMLUnknownElement.onclick

Answer 1

If you want to call a backend handler with a button, you need to put the button into a form and change the format of the handler name.

The default convention works by matching the HTTP verb used for the request to the name of the method, which is prefixed with "On": OnGet(), OnPost(), OnPut() etc.And after OnGet(), OnPost(), OnPut(),etc, the first letter needs to be a capital letter.

Here is a demo:

.cshtml:

<form method="post" asp-page-handler="FuncaoClique">
    <button>OnClickTest</button>
</form>

.cshtml.cs:

public void OnPostFuncaoClique()
{
    Console.WriteLine("Hello");
}