Erstellen Sie ein Array von Optionsfeldern und übergeben Sie es an den Net Core-Controller

Question

Ich versuche, eine Liste (Array) von Optionsfeldern von JavaScript an einen C# Net Core 6-Controller zu übergeben.

HTML sieht so aus:

<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"  />

Es gibt also viele Gruppen (mehr als ich hier zeigen kann), jede mit vielen Optionen. Ich möchte die vollständige Liste der Optionen mit „Name“, „Wert“ und „geprüft“ erhalten. Oder, wenn es einfacher ist, einfach ein paar „aktivierte“ Optionen (verwenden Sie „id“ reicht aus)

Der nächste Schritt, den ich bisher erreicht habe, ist:

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

Parameter auf dem Controller werden als „Strings“ definiert

Allerdings bekomme ich Folgendes, was kein gültiges JSON ist:

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

Ich habe das Gefühl, dass ich das nicht richtig gehandhabt habe! Grundsätzlich muss ich in einem C#-Controller wissen, welche Optionen aktiviert sind.

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 {
    
    
    
    }

输出：