ASP.NET Core中如何将JS变量传递至控制器？

方案一：通过隐藏表单字段传递（适合同步表单提交） #

你目前用的是submit按钮，最直接的方式是在表单里新增一个隐藏字段，点击按钮时把获取到的id赋值给它，表单提交时就会自动把id传给控制器。

前端代码修改： #

<!-- 在你的<form>标签内添加隐藏输入框 -->
<input type="hidden" id="hiddenId" name="itemId" />
<input class="btn_confirm" type="submit" id={i} onclick="id_click(this.id)" value="Delete" />

<script>
function id_click(clicked_id) {
    // 将点击的id赋值给隐藏字段
    document.getElementById('hiddenId').value = clicked_id;
}
</script>

控制器对应代码： #

[HttpPost]
public IActionResult Delete(int itemId)
{
    // itemId即为前端传递的id，在此处理删除逻辑
    return RedirectToAction("Index");
}

方案二：AJAX异步提交（适合无刷新操作） #

如果不想刷新页面，用AJAX异步提交更灵活。点击按钮时阻止表单默认提交行为，再把id通过请求体传给控制器。

前端代码： #

<!-- 将按钮type改为button，避免默认表单提交 -->
<input class="btn_confirm" type="button" id={i} onclick="id_click(this.id)" value="Delete" />

<script>
async function id_click(clicked_id) {
    try {
        const response = await fetch('/Home/Delete', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 带上ASP.NET Core要求的防伪造令牌
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            },
            body: JSON.stringify({ id: clicked_id })
        });

        if (response.ok) {
            alert('删除成功');
            // 可在此添加刷新列表等后续操作
        } else {
            alert('删除失败');
        }
    } catch (error) {
        console.error('请求出错:', error);
    }
}
</script>

控制器对应代码： #

[HttpPost]
public IActionResult Delete([FromBody] DeleteRequest request)
{
    // request.Id即为前端传递的id，处理删除逻辑
    return Ok();
}

// 定义接收参数的模型类
public class DeleteRequest
{
    public int Id { get; set; }
}

方案三：通过路由参数传递 #

也可以把id拼在请求URL里，点击按钮时修改表单的action属性，再提交表单。

前端代码： #

<form id="deleteForm" method="post" action="">
    <input class="btn_confirm" type="submit" id={i} onclick="id_click(this.id)" value="Delete" />
</form>

<script>
function id_click(clicked_id) {
    // 修改表单action，将id作为路由参数
    document.getElementById('deleteForm').action = `/Home/Delete/${clicked_id}`;
}
</script>

控制器对应代码： #

[HttpPost("/Home/Delete/{id:int}")]
public IActionResult Delete(int id)
{
    // id即为前端传递的参数，处理删除逻辑
    return RedirectToAction("Index");
}

关键注意事项： #

• 用POST请求时，必须带上防伪造令牌（ASP.NET Core默认启用防跨站请求伪造保护），使用TagHelper的<form>标签会自动生成__RequestVerificationToken隐藏字段，AJAX请求需在headers中携带该值。
• 确保前端传递的id类型与控制器接收的类型一致（如均为int或字符串），避免类型转换错误。

内容的提问来源于stack exchange，提问作者P.Dakov