创建单选按钮数组并传递给 Net Core 控制器

Question

我正在尝试将单选按钮列表（数组）从 JavaScript 传递到 C# Net Core 6 控制器。

HTML 是这样的：

<input class="js-filter-item" type="radio" name="Performance_Type" value="Standard" id="filter-group-Performance_Type--item-Standard"  />
<input class="js-filter-item" type="radio" name="Performance_Type" value="VIP" id="filter-group-Performance_Type--item-VIP"  />

<input class="js-filter-item" type="radio" name="Price" value="Up_to_&#xA3;55" id="filter-group-Price--item-Up_to_&#xA3;55"  />
<input class="js-filter-item" type="radio" name="Price" value="Up_to_&#xA3;70" id="filter-group-Price--item-Up_to_&#xA3;70"  />

因此，有许多组（比我在这里显示的更多），每个组都有许多选项。我想获得带有“名称”、“值”和“选中”的选项的完整列表。或者，如果更简单，只需一些“选中”选项（使用“id”即可）

到目前为止我得到的最接近的是：

var options = document.querySelectorAll('.js-filter-item');
var optionsArray = JSON.stringify((Array.from(options).map(el => ([el.name, el.value, el.checked]))));

控制器上的参数定义为“字符串”

但是，我得到了这个，它不是有效的 JSON：

[["Performance_Type","Standard",true],["Performance_Type","VIP",false]]

我觉得我没有以正确的方式处理这件事！基本上，在 C# 控制器中，我需要知道检查了哪些选项。

Answer 1

实际上，这个场景可以通过多种方式实现，为了对选中的单选按钮进行排序，首先我们应该根据其 Id 设置条件。此外，我们需要将这些 id 绑定到类中，最后将请求发送到控制器。

让我们看看实践：假设我们有以下课程。

型号：

public class RadioButtonModel
    {
     
        public string Name { get; set; }
        public string Value { get; set; }
        public string Id { get; set; }
        public bool IsChecked { get; set; }
    }

控制器：

[HttpPost]
    public ActionResult PostRadioBUtton(List radioButtonModels)
    {
        return Ok(radioButtonModels);
    }

查看：

HTML：

注意：我在第一个和最后一个单选按钮中设置了选中属性来测试场景。您必须根据 Id 或 name 属性在 if 条件中执行此操作。网上有大量关于如何做到这一点的示例。

脚本：

@section scripts {
    sssccc
    sssccc
    sssccc
    }

输出：