.NET Core 3.1环境下button按钮无法触发AspPageHandler处理器问题

问题根因 #

你的页面处理器OnPostSearchProductionRecordsAsync是POST请求类型的处理器：

• <a>标签默认发送GET请求，可触发说明你项目中存在对应的GET类型同名处理器，GET请求天然会触发整页刷新，符合你描述的现象
• type="submit"的按钮无法触发的核心原因是未被包裹在method为post的form表单内，Razor Pages要求POST类型的Handler必须接收合法的POST表单请求

解决方案 #

方案1：修复表单提交触发逻辑 #

将按钮包裹在post类型的form标签中即可正常触发处理器，代码示例：

<form method="post">
  <!-- 你的其他表单输入项可放在此处 -->
  <span class="input-group-append">
      <button type="submit" asp-page-handler="SearchProductionRecords" class="btn btn-info btn-sm"><i class="fas fa-search"></i> </button>
  </span>
</form>

验证注意：请确认页面顶部已引入TagHelper声明 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers，否则asp-page-handler属性不会生效，按钮不会自动生成对应的formaction提交地址

方案2：无刷新提交（匹配你不希望页面刷新的需求） #

用AJAX手动发送POST请求调用处理器，不会触发整页刷新，实现步骤如下：

1. 修改按钮代码，移除submit类型，添加ID便于绑定事件：

<button id="searchBtn" class="btn btn-info btn-sm"><i class="fas fa-search"></i> </button>

2. 编写JS请求逻辑，需携带Razor Pages要求的防伪校验token：

document.getElementById('searchBtn').addEventListener('click', async () => {
  // 获取页面自动生成的防伪校验token
  const verifyToken = document.querySelector('input[name="__RequestVerificationToken"]').value;
  const res = await fetch('?handler=SearchProductionRecords', {
    method: 'POST',
    headers: {
      'RequestVerificationToken': verifyToken
    }
  });

  // 按需处理返回结果：如果是导出Excel场景，可将返回的Blob转为下载链接
  // const blob = await res.blob();
  // const downloadUrl = window.URL.createObjectURL(blob);
  // const a = document.createElement('a');
  // a.href = downloadUrl;
  // a.download = '生产记录.xlsx';
  // a.click();
  // window.URL.revokeObjectURL(downloadUrl);
});

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