Créez un tableau de boutons radio et transmettez-le au contrôleur Net Core

Question

J'essaie de transmettre une liste (tableau) de boutons radio de JavaScript à un contrôleur C# Net Core 6.

HTML est comme ceci :

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

Il existe donc de nombreux groupes (plus que ce que je peux montrer ici), chacun avec de nombreuses options. Je souhaite obtenir la liste complète des options avec « nom », « valeur » et « coché ». Ou, si c'est plus simple, juste quelques options "cochées" (utilisez "id" fera l'affaire)

Le plus proche que j'ai obtenu jusqu'à présent est :

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

Les paramètres du contrôleur sont définis comme des "chaînes"

Cependant, j'obtiens ceci, qui n'est pas un JSON valide :

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

J’ai l’impression de ne pas avoir géré ça de la bonne façon ! Fondamentalement, dans un contrôleur C#, j'ai besoin de savoir quelles options sont cochées.

Answer 1

En fait, ce scénario peut être implémenté de plusieurs manières, afin de trier les boutons radio sélectionnés, nous devons d'abord définir la condition en fonction de son identifiant. De plus, nous devons lier ces identifiants en classes et enfin envoyer la requête au contrôleur.

Voyons cela en pratique : disons que nous avons le cours suivant.

Modèle :

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

Contrôleur :

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

Vue :

HTML :

Remarque : J'ai défini l'attribut coché dans le premier et le dernier bouton radio pour tester le scénario. Vous devez le faire dans une condition if basée sur l'attribut Id ou name. Il existe des tonnes d’exemples en ligne sur la façon de procéder.

Script :

@section scripts {
    sssccc
    sssccc
    sssccc
    }

Sortie :