如何通过图标onclick事件向ASP.NET Core 7 MVC控制器发起Post请求

你当前用location.href发起的是Get请求，和标记了[HttpPost]的Action不匹配，所以报错。要实现Post回发，有两种常用方案：

方案一：使用隐藏表单提交（适合需要页面跳转的场景） #

1. 在循环渲染用户列表时，为每个用户生成一个隐藏的Post表单，包含用户ID和防伪造令牌：

<form id="deleteForm_@item.UserID" action="@Url.Action("Delete", "ManageUsers")" method="post" style="display:none;">
    <input type="hidden" name="Id" value="@item.UserID" />
    @Html.AntiForgeryToken()
</form>

2. 修改确认区域的勾选图标点击事件，触发表单提交：

<span id="confirmDeleteSpan_@item.UserID.ToString()" style="display:none">
    <span style="color:red;font-weight:bold">Delete?</span>
    <i class="bi bi-check-circle-fill" onclick="document.getElementById('deleteForm_@item.UserID').submit()" data-for></i>
    <i class="bi bi-x-circle-fill" onclick="confirmDelete('@item.UserID.ToString()', false)"></i>
</span>

3. 控制器的Delete Action保持[HttpPost]，并添加防伪造令牌验证：

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Delete(int Id)
{
    // 编写用户删除逻辑
    // 删除完成后跳回用户列表页
    return RedirectToAction(nameof(Index));
}

方案二：使用AJAX发起Post请求（适合无刷新删除场景） #

1. 修改确认区域的勾选图标，调用自定义JS函数：

<span id="confirmDeleteSpan_@item.UserID.ToString()" style="display:none">
    <span style="color:red;font-weight:bold">Delete?</span>
    <i class="bi bi-check-circle-fill" onclick="deleteUser('@item.UserID')" data-for></i>
    <i class="bi bi-x-circle-fill" onclick="confirmDelete('@item.UserID.ToString()', false)"></i>
</span>

2. 编写JS函数，用fetch发起Post请求（需携带防伪造令牌）：

function deleteUser(userId) {
    // 获取页面中的防伪造令牌
    const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
    
    fetch('@Url.Action("Delete", "ManageUsers")', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'RequestVerificationToken': token
        },
        body: `Id=${userId}`
    })
    .then(response => {
        if (response.ok) {
            // 删除成功后的操作，比如移除页面上对应用户的行
            document.getElementById(`userRow_${userId}`).remove();
            // 如果需要刷新页面，用 location.reload();
        } else {
            alert('删除失败，请重试');
        }
    })
    .catch(err => console.error('请求出错:', err));
}

3. 控制器Action可以返回JSON结果（适配AJAX请求）：

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Delete(int Id)
{
    try
    {
        // 执行删除逻辑
        // ...
        return Json(new { success = true });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message });
    }
}

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