Buat tatasusunan butang radio dan hantarkannya kepada pengawal Teras Bersih

Question

Saya cuba menghantar senarai (tatasusunan) butang radio daripada JavaScript kepada pengawal C# Net Core 6.

HTML adalah seperti ini:

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

Jadi, terdapat banyak kumpulan (lebih daripada yang saya boleh tunjukkan di sini), masing-masing mempunyai banyak pilihan. Saya ingin mendapatkan senarai lengkap pilihan dengan "nama", "nilai" dan "disemak". Atau, jika lebih mudah, hanya beberapa pilihan "ditandai" (gunakan "id" akan membantu)

Paling dekat yang saya dapat setakat ini ialah:

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

Parameter pada pengawal ditakrifkan sebagai "rentetan"

Walau bagaimanapun, saya mendapat ini, yang tidak sah JSON:

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

Saya rasa saya tidak mengendalikan perkara ini dengan cara yang betul! Pada asasnya, dalam pengawal C #, saya perlu tahu pilihan mana yang disemak.

Answer 1

Sebenarnya, senario ini boleh dilaksanakan dalam pelbagai cara, untuk mengisih butang radio yang dipilih, mula-mula kita harus menetapkan syarat berdasarkan Idnya. Tambahan pula, kita perlu mengikat id ini ke dalam kelas dan akhirnya menghantar permintaan kepada pengawal.

Mari kita lihat dalam amalan: Katakan kita mempunyai kelas berikut.

Model:

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

Pengawal:

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

Pandangan:

HTML:

Nota: Saya menetapkan atribut yang ditanda dalam butang radio pertama dan terakhir untuk menguji senario. Anda perlu melakukan ini dalam keadaan if berdasarkan atribut Id atau nama. Terdapat banyak contoh dalam talian tentang cara melakukan ini.

Skrip:

@section scripts {
    sssccc
    sssccc
    sssccc
    }

Keluaran: