How to add a event to a button using Razor?

Question

I am quite new to asp.net core development and I really don't know much of javascript, I am trying to know if there is some way to handle input events like OnClick() or OnChange() of Html inputs using only C#/Razor code without a form too and using only Razor Pages/MVC , Something Like this:

@{
    void RazorFunction()
     {
       //Do Stuff 
     }
}    
<button Onclick="RazorFunction"/>

Collyer

You can if you use a Blazor project and write all of your front-end code in C#. – Spatula

Seens like a Blazor a good ideia indeed, but i can't port the solution right now, actually i am limited to Razor Pages Asp.net core – Collyer

No, without using Blazor, there is no way to handle client-side events using C# or Razor, without involving forms or JavaScript. – Suckerfish

There is no need to port your solution to use Blazor, just reference it. See my comment on Umar's answer below. – Southpaw

Answer 1

In razor pages, you could use javascript and @functionsdirective which enables adding C# members (fields, properties, and methods) to the generated class:

@page
@model IndexModel

@functions{
    public string GetHello()
    {
        return "Hello";
    }
}

<button Onclick="RazorFunction()">Click</button>

@section Scripts
{
 <script>
    function RazorFunction() {
        $("button").html('@GetHello()');
    }

 </script>
} 

You could also refer to the below links to integrate ASP.NET Core Razor components and blazor into Razor Pages web app project:

https://learn.microsoft.com/en-us/aspnet/core/blazor/integrate-components?view=aspnetcore-3.1

https://andrewlock.net/replacing-ajax-calls-in-razor-pages-using-razor-components-and-blazor/

Lagrange

How do I pass a parameter if I had <button Onclick="RazorFunction(@arg)">Click</button> ? The function in the scripts section does not seem to like it – Selfpropelled

I'm trying to do this, and in the c# code I want to access the model but I get errors that I need a reference to an object, or when I don't have it as a static function then it doesn't get called. – Thermoplastic

How to have a server-side button click event function? – Bobbinet

Answer 2

You can also do it like this in HTML:

@using (Html.BeginForm("FunctionName", "ControllerName"))
    {
        <button type="submit">TEXT</button>
    }

And in the controller add:

public ActionResult CheckLoginStatus()
    {
        //do stuff...
    }

Soporific

Answer 3

You can try something like this, by declaring the the @onclick and @onchange methods you could declare the methods in a code section below :

I had added some sample code for reference :

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<input value="@currentCount" @onchange="chg" />

@code {
 int currentCount = 0;

 void IncrementCount()
 {
     currentCount++;
 }

 void chg(ChangeEventArgs e)
 {
     currentCount = 999;
 }
}

Moynahan

This solution requires Blazor which OP says they cannot use. – Suckerfish

This is a good way to go, but I recommend adding to your answer the necessary setup. Using Blazor directives does not require porting a project, but does require this <script src="_framework/blazor.server.js"></script> on the page or component, and this in startup.ConfigureServices: services.AddRazorPages(); and this in startup.Configure: endpoints.MapBlazorHub(); – Southpaw

Answer 4

Very Simple just write the following html

<button @onclick="RazorFunction">Button</button>

You also need to change your code block as bellow

@code{

 void RazorFunction(MouseEventArgs e)
 {
   //Do Stuff 
 }
}

Trophozoite

This solution requires Blazor which OP says they cannot use. – Suckerfish