如何将单选按钮数组传递至.NET Core 6 Controller

方案1：仅传递选中的单选按钮（推荐） #

这种方式更高效，只传输用户实际选择的内容，减少不必要的数据量。

前端JavaScript代码 #

先筛选出所有被选中的单选按钮，再构造成结构化的对象数组：

// 获取所有选中的单选按钮
const selectedOptions = document.querySelectorAll('.js-filter-item:checked');
// 转换为包含关键信息的对象数组
const selectedData = Array.from(selectedOptions).map(el => ({
    id: el.id,
    name: el.name,
    value: el.value
}));
// 序列化为JSON字符串
const jsonData = JSON.stringify(selectedData);

// 通过fetch发送到后端（也可以用axios等工具）
fetch('/YourController/HandleSelectedOptions', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: jsonData
});

后端C#控制器处理 #

先创建对应的数据模型来接收参数：

public class SelectedRadioItem
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Value { get; set; }
}

然后在控制器中直接接收这个模型数组：

[HttpPost]
public IActionResult HandleSelectedOptions([FromBody] List<SelectedRadioItem> selectedItems)
{
    // 直接遍历处理选中项
    foreach (var item in selectedItems)
    {
        // 示例逻辑：获取选中项的分组名和值
        var groupName = item.Name;
        var selectedValue = item.Value;
    }
    return Ok();
}

方案2：传递所有单选按钮的状态（含未选中） #

如果确实需要获取全部选项的状态，调整前端代码，将每个单选按钮转为包含完整信息的对象：

前端JavaScript代码 #

const allOptions = document.querySelectorAll('.js-filter-item');
const allOptionsData = Array.from(allOptions).map(el => ({
    id: el.id,
    name: el.name,
    value: el.value,
    checked: el.checked
}));
const jsonData = JSON.stringify(allOptionsData);

// 发送请求逻辑同方案1

后端C#控制器处理 #

创建对应的数据模型：

public class RadioItem
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Value { get; set; }
    public bool Checked { get; set; }
}

控制器接收并筛选选中项：

[HttpPost]
public IActionResult HandleAllOptions([FromBody] List<RadioItem> allItems)
{
    // 筛选出选中的选项
    var selectedItems = allItems.Where(item => item.Checked).ToList();
    // 后续处理逻辑
    return Ok();
}

之前代码的问题说明 #

你之前把每个单选按钮转为数组[el.name, el.value, el.checked]，虽然这是有效的JSON，但结构不够直观，后端用string接收后需要手动解析拆分，不如用对象数组直接绑定到C#模型，处理起来更简洁高效。

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