建立單選按鈕數組並傳遞給 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 {
    
    
    
    }

輸出：