如何在ASP.NET MVC中通过JavaScript将数组传递至控制器？

我在ASP.NET MVC页面中设置了一组复选框，当选中这些复选框并点击按钮时，会调用一个JavaScript函数来获取选中项的值。请问需要修改该JavaScript函数中的哪些内容，才能将这些值组成的数组传递至后端控制器中？

现有代码 #

按钮代码 #

<input type="button" value="Submit" onclick="getChecked()"> 

复选框代码 #

@foreach (var item in Model.Attachments)
{                
    <input class="form-check-input" type="checkbox" name="item" value="@item.Id" >
}

待修改的JavaScript函数 #

function getChecked() {
 
 var arr = [];

 checked_items = ''
 var items = document.getElementsByName("item")
 for (i = 0; i < items.length; i++) {
       if (items[i].checked)
        arr.push(item[i]);
        }
        alert('JAVASCRIPT : Checked items are : ' + arr);

    }

后端控制器代码 #

[HttpPost]
public ActionResult Selected(Guid[] item)
{
   return View(item);
}

需要修改的内容 #

1. 修复选中值收集的错误 #

原函数中arr.push(item[i]);存在两处问题：

• 变量名错误：遍历的集合是items，不是item，应改为items[i]
• 收集对象错误：当前代码收集的是DOM元素本身，我们需要的是复选框的value属性值（即@item.Id对应的Guid字符串）

修正后代码：

arr.push(items[i].value);

2. 添加向后端发送请求的逻辑 #

原函数仅完成了选中值的收集，没有将数据传递到后端。需要新增AJAX请求逻辑，将数组发送到控制器的Selected方法。以下是使用原生fetch API的实现：

在收集完选中值后，添加以下代码：

// 发送POST请求到后端控制器
fetch('/你的控制器名/Selected', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        // 携带ASP.NET MVC必需的CSRF验证Token
        'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
    },
    body: JSON.stringify(arr)
})
.then(response => {
    if (response.ok) {
        console.log('数据提交成功');
        // 可根据需求添加页面跳转、提示等后续操作
    } else {
        throw new Error('请求失败');
    }
})
.catch(error => {
    console.error('提交出错:', error);
});

注意：

• 替换/你的控制器名/Selected为实际的控制器路由地址
• 需在页面表单内添加@Html.AntiForgeryToken()，否则后端会因CSRF验证失败拒绝请求

修改后的完整JavaScript函数 #

function getChecked() {
    var arr = [];
    var items = document.getElementsByName("item");
    // 遍历收集选中的复选框value值
    for (var i = 0; i < items.length; i++) {
        if (items[i].checked) {
            arr.push(items[i].value);
        }
    }
    alert('JAVASCRIPT : Checked items are : ' + arr);

    // 新增：将数组发送到后端
    fetch('/Home/Selected', { // 替换为你的控制器路径
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: JSON.stringify(arr)
    })
    .then(response => {
        if (response.ok) {
            console.log('提交成功');
        } else {
            throw new Error('请求失败');
        }
    })
    .catch(error => {
        console.error('提交出错:', error);
    });
}

额外说明 #

后端Selected方法的Guid[] item参数可以直接接收前端传递的字符串数组，ASP.NET MVC的模型绑定会自动将字符串转换为Guid类型。

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