如何将HTML删除按钮的ID值传递至ASP.NET（C#）后端的OnPostDelete方法？

方法1：使用ASP.NET Tag Helper（原生推荐） #

这是最简洁的原生实现方式，无需解析ID字符串，直接通过路由参数传递ID：
前端按钮（可保留原ID，同时绑定路由参数）：

<button id="Delete-1" type="submit" asp-page-handler="Delete" asp-route-id="1" class="btn btn-danger">删除</button>
<button id="Delete-2" type="submit" asp-page-handler="Delete" asp-route-id="2" class="btn btn-danger">删除</button>

后端OnPostDelete方法直接接收ID参数：

public async Task<IActionResult> OnPostDelete(int id)
{
    // 直接使用id值发起API删除请求
    // 示例：await _yourApiService.DeleteObjectAsync(id);
    return RedirectToPage();
}

方法2：JavaScript解析按钮ID并提交 #

如果必须通过按钮ID提取数字，可通过JS绑定点击事件，将ID存入隐藏字段后提交表单：
先添加一个用于提交的表单和隐藏字段：

<form id="deleteForm" method="post">
    <input type="hidden" id="targetDeleteId" name="targetDeleteId" />
    <!-- 页面其他内容 -->
</form>

<button id="Delete-1" class="delete-btn btn btn-danger">删除</button>
<button id="Delete-2" class="delete-btn btn btn-danger">删除</button>

绑定JS点击事件：

document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        // 拆分按钮ID提取数字部分
        const deleteId = this.id.split('-')[1];
        // 给隐藏字段赋值
        document.getElementById('targetDeleteId').value = deleteId;
        // 提交表单触发后端方法
        document.getElementById('deleteForm').submit();
    });
});

后端方法接收隐藏字段传递的ID：

public async Task<IActionResult> OnPostDelete(int targetDeleteId)
{
    // 使用targetDeleteId执行删除逻辑
    // await _yourApiService.DeleteObjectAsync(targetDeleteId);
    return RedirectToPage();
}

方法3：使用FormAction属性（独立按钮场景） #

如果删除按钮不在表单内部，可通过formaction直接指定请求地址和参数：

<button id="Delete-1" type="submit" formaction="/YourPageName?handler=Delete&id=1" class="btn btn-danger">删除</button>
<button id="Delete-2" type="submit" formaction="/YourPageName?handler=Delete&id=2" class="btn btn-danger">删除</button>

后端方法与方法1一致，直接接收int id参数即可。

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