如何使用 Razor 向按钮添加事件？

Question

我对 asp.net 核心开发很陌生，我对 javascript 了解不多，我想知道是否有某种方法可以处理像 OnClick() 这样的输入事件或仅使用 C#/Razor 代码的 Html 输入的 OnChange() 也没有表单 和 仅使用 Razor Pages/MVC ，像这样：

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

Answer 1

您可以尝试这样的操作，通过声明 @onclick 和 @onchange 方法，您可以在下面的代码部分中声明这些方法：

我添加了一些示例代码以供参考：

<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;
 }
}

Answer 2

很简单就写下面的html

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

您还需要按以下方式更改您的代码块

@code{

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

Answer 3

在 razor 页面中，您可以使用 javascript 和 @functions 指令，它可以将 C# 成员（字段、属性和方法）添加到生成的 class:

@page
@model IndexModel

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

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

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

 </script>
}

您还可以参考以下链接将 ASP.NET 核心 Razor 组件和 blazor 集成到 Razor Pages 网络应用程序项目中：

https://docs.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/

如何使用 Razor 向按钮添加事件？

How to add a event to a button using Razor?

c#

asp.net-core

razor-pages