ASP.NET Core 6中Razor Pages按钮点击如何关联后台方法？

1. AJAX异步调用（推荐用于无刷新场景） #

直接给按钮绑定JavaScript点击事件，通过fetch发起请求，调用后台符合Razor Pages命名规范的Handler方法。

前端代码： #

<button id="doStuffBtn">Do some stuff</button>
@* 手动添加防伪造令牌，POST请求必需 *@
@Html.AntiForgeryToken()

<script>
document.getElementById('doStuffBtn').addEventListener('click', async () => {
    try {
        const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
        const res = await fetch('/Test?handler=SomeStuff', {
            method: 'POST',
            headers: {
                'RequestVerificationToken': token,
                'Content-Type': 'application/json'
            }
        });
        
        if (res.ok) {
            // 自定义成功逻辑，比如更新页面局部内容
            console.log('操作执行完成');
        } else {
            console.error('请求失败');
        }
    } catch (err) {
        console.error('请求异常:', err);
    }
});
</script>

后台代码（需遵循Razor Pages Handler命名规则）： #

// 对应POST请求的Handler方法，命名格式：OnPost[HandlerName]
public IActionResult OnPostSomeStuff()
{
    // 你的业务逻辑代码
    return Ok();
}

如果想用GET请求，只需把前端method改成GET，后台方法命名为OnGetSomeStuff即可（注意GET请求不要用于修改数据的操作）。

2. 锚点链接模拟按钮（适用于允许页面刷新的场景） #

把按钮样式改成链接，直接通过URL调用GET类型的Handler方法，这种方式会触发页面刷新。

前端代码： #

<a href="/Test?handler=SomeStuff" class="btn btn-primary">Do some stuff</a>

后台代码： #

// 对应GET请求的Handler方法，命名格式：OnGet[HandlerName]
public IActionResult OnGetSomeStuff()
{
    // 你的业务逻辑代码
    // 执行完成后返回当前页面或重定向
    return Page();
}

3. SignalR实时调用（复杂实时交互场景） #

如果需要实时反馈或跨客户端交互，可以用SignalR直接调用后台方法，适合聊天、实时数据更新等场景，普通按钮点击场景一般无需用到，但也是一种可行途径。

后台Hub代码： #

public class StuffHub : Hub
{
    public async Task ExecuteSomeStuff()
    {
        // 你的业务逻辑代码
        // 执行完成后给调用客户端返回通知
        await Clients.Caller.SendAsync("StuffExecuted");
    }
}

前端代码： #

<button id="doStuffBtn">Do some stuff</button>
<script src="/lib/signalr/signalr.js"></script>

<script>
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/stuffHub")
    .build();

// 启动连接
connection.start().catch(err => console.error(err));

// 绑定按钮点击事件
document.getElementById('doStuffBtn').addEventListener('click', () => {
    connection.invoke("ExecuteSomeStuff")
        .catch(err => console.error(err));
});

// 接收后台返回的通知
connection.on("StuffExecuted", () => {
    alert('操作已完成');
});
</script>

内容的提问来源于stack exchange，提问作者Jay