.Net Core Razor Pages同页面两个submit按钮无法连续提交如何解决

你遇到的无法连续提交的问题，本质是默认同步表单提交逻辑导致的：第一次点击GetHour按钮后，浏览器会触发整页重载，如果你没有做特殊处理，要么表单内用户已输入的内容会丢失，要么Razor Pages自带的防伪令牌没有更新，导致第二次提交被框架拦截返回400错误，看起来就是点击没有响应。

方案1：GetHour改为AJAX异步提交（推荐） #

该方案不会刷新整页，表单已填内容和防伪令牌都会保留，不会影响后续提交操作。

1. 给GetHour按钮新增id属性：

<input type="submit" id="getHourBtn" value="GetHour" asp-page-handler="Hour" class="btn btn-primary btn-style" formnovalidate />

2. 页面新增JS代码处理异步提交：

document.getElementById('getHourBtn').addEventListener('click', function(e) {
    // 阻止默认同步提交
    e.preventDefault();
    const form = document.getElementById('createForm');
    const formData = new FormData(form);
    // 指定提交的Handler
    formData.append('handler', 'Hour');
    
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: formData
    }).then(res => {
        if(res.ok) {
            // 此处处理返回结果，比如将获取到的小时填充到对应表单字段
            alert('获取小时成功，可继续提交请求');
        }
    }).catch(err => console.error('请求出错：', err));
});

3. 调整后端OnPostGetHour方法，返回对应结果即可，不需要刷新页面：

public async Task<IActionResult> OnPostGetHour()
{         
    // 原有业务逻辑
    var hour = DateTime.Now.Hour;
    // 可根据需求返回JSON、部分视图等结果
    return new JsonResult(new { success = true, data = hour });
}

方案2：同步提交保留状态 #

如果不想用AJAX，坚持走同步提交逻辑，需要做两处调整：

1. 所有表单输入字段对应的PageModel属性都加上[BindProperty]注解，保证第一次提交后页面重载时，已输入的内容会自动回显：

// 示例：表单有什么字段就对应加什么属性
[BindProperty]
public string UserName { get; set; }
[BindProperty]
public int RequestType { get; set; }

2. 修改OnPostGetHour返回值类型为IActionResult，调用Page()方法返回完整页面，触发页面刷新更新防伪令牌：

public async Task<IActionResult> OnPostGetHour()
{         
    // 原有业务逻辑
    return Page();
}

如果调整后仍然有问题，可打开浏览器控制台查看是否有400报错，绝大多数400错误都是防伪令牌提交异常导致的，确认提交时带上了正确的__RequestVerificationToken参数即可解决。

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