ASP.NET Core 3.1+jQuery删除表单无法提交问题排查与修复

以下是针对你遇到问题的具体排查方向和修复方案：

1. 检查删除按钮的提交触发逻辑 #

当你禁用删除按钮并设置加载状态后，浏览器默认不会触发表单的提交行为（因为按钮已被禁用），需要手动触发表单提交：

$('#deleteBtn').on('click', function(e) {
    // 阻止默认提交，避免重复触发
    e.preventDefault();
    
    const $btn = $(this);
    const $form = $btn.closest('form');
    
    // 设置加载状态
    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> 删除中...');
    
    // 手动提交表单
    $form.submit();
});

2. 确认模态框启用按钮的逻辑无问题 #

确保点击确认按钮时，正确移除删除按钮的禁用状态，且没有意外覆盖表单提交事件：

$('#confirmModalConfirmBtn').on('click', function() {
    $('#deleteModal').modal('hide');
    // 正确启用删除按钮，不要用off()移除所有绑定事件
    $('#deleteBtn').prop('disabled', false).removeClass('disabled');
});

3. 验证Anti-Forgery Token的存在 #

Razor Pages默认要求RequestVerificationToken才能提交POST请求，确保表单中包含该令牌：

<form method="post" asp-page-handler="Delete" asp-route-id="@Model.TargetItemId">
    <!-- Razor Pages会自动生成令牌，或手动添加 -->
    @Html.AntiForgeryToken()
    
    <button type="submit" id="deleteBtn" disabled class="btn btn-danger">删除</button>
</form>

4. 检查浏览器控制台的JS错误 #

打开浏览器F12控制台的Console标签，查看是否存在元素未找到、变量未定义等错误——这类错误会直接中断JS代码执行，导致表单无法提交。

5. 确认后端Delete Handler配置正确 #

确保PageModel中存在对应的POST处理方法，参数与路由匹配：

public async Task<IActionResult> OnPostDeleteAsync(int id)
{
    var targetItem = await _dbContext.Items.FindAsync(id);
    if (targetItem != null)
    {
        _dbContext.Items.Remove(targetItem);
        await _dbContext.SaveChangesAsync();
    }
    return RedirectToPage("./Index");
}

6. 检查表单与按钮的关联 #

如果删除按钮在模态框内（不在表单DOM结构中），需要显式指定关联的表单：

<!-- 表单 -->
<form id="deleteForm" method="post" asp-page-handler="Delete" asp-route-id="@Model.TargetItemId">
    @Html.AntiForgeryToken()
</form>

<!-- 模态框内的删除按钮 -->
<button type="submit" id="deleteBtn" form="deleteForm" disabled class="btn btn-danger">确认删除</button>

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