html 创建单选按钮数组并传递给网络核心控制器

mi7gmzs6  于 2023-05-21  发布在  其他
关注(0)|答案(1)|浏览(156)

我试图从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"  />

因此,有许多组(比我在这里显示的要多),每个组都有许多选项。我想得到一个完整的选项列表,包括“名称”、“值”和“选中”。或者,如果要简单得多,只需一组“checked”选项(带“id”就行)
目前为止我最接近的是:

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

控制器上的参数定义为“string”
然而,我得到了这个,这不是有效的JSON:

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

我觉得我的方法不对!!基本上,在C#控制器中,我需要知道哪些选项被选中。

omqzjyyz

omqzjyyz1#

我觉得我的方法不对!!基本上,在C#控制器中,我需要知道哪些选项被选中。
实际上,这种情况可以通过多种方式实现,为了对选中的单选按钮进行排序,首先我们应该根据其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<RadioButtonModel> radioButtonModels)
    {
        return Ok(radioButtonModels);
    }

查看:
HTML:

<input class="js-filter-item" type="radio" name="Performance_Type" value="Standard" id="filter-group-Performance_Type--item-Standard" checked />
<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" checked />

**注意:**我在第一个和最后一个单选按钮中设置了checked属性,以测试场景。你必须在if条件中基于Id或name属性来做。有吨的样本onlin如何做到这一点。

脚本:

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>

        $(document).ready(function () {
            var options = document.querySelectorAll('.js-filter-item');
            var optionsArray = (Array.from(options).map(el => ([el.name, el.value, el.id, el.checked])));
       
            var listRadio = [];
            for (let i = 0; i < optionsArray.length; i++) {
                console.log("array: ", i, optionsArray[i]);
                    var items = {
                        Name: optionsArray[i][0],
                        Value: optionsArray[i][1],
                        Id: optionsArray[i][2],
                        IsChecked: optionsArray[i][3],
                       
                       

                    }
                    listRadio.push(items);
            }
            console.log(listRadio);
            var url = '@Url.Action("PostRadioBUtton","CountOnModel")';
            $.ajax({
                url: url,
                type: "POST",
                datatype: "JSON",
                data: { radioButtonModels: listRadio },
                success: function (response) {
                    console.log(response);
                }
            });
        });
    </script>
    }

输出:

相关问题