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

【问题标题】：How to add a event to a button using Razor?如何使用 Razor 向按钮添加事件？
【发布时间】：2020-05-17 04:01:39
【问题描述】：

我是asp.net核心开发的新手，我真的不太了解javascript，我想知道是否有某种方法可以处理输入事件，如使用Html输入的OnClick（）或OnChange（）只有 C#/Razor 代码 没有表单 并且 只使用 Razor Pages/MVC ，像这样：

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

【问题讨论】：

如果您使用 Blazor 项目并使用 C# 编写所有前端代码，则可以。
看起来像 Blazor 确实是个好主意，但我现在无法移植解决方案，实际上我仅限于 Razor Pages Asp.net 核心
不，如果不使用 Blazor，则无法使用 C# 或 Razor 处理客户端事件，而不涉及表单或 JavaScript。

标签： c# asp.net-core razor-pages

【解决方案1】：

在 razor 页面中，您可以使用 javascript 和 @functionsdirective 将 C# 成员（字段、属性和方法）添加到生成的类中：

@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 Core Razor 组件和 blazor 集成到 Razor Pages Web 应用项目中：

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/

【讨论】：

【解决方案2】：

很简单只要写下面的html

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

您还需要如下更改您的代码块

@code{

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

【讨论】：

此解决方案需要 Blazor，OP 表示他们无法使用。

【解决方案3】：

您可以尝试这样的事情，通过声明 @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;
 }
}

【讨论】：

此解决方案需要 Blazor，OP 表示他们无法使用。