如何使用ajax从嵌套循环中发送多个选中的复选框选中值？

Question

在上图中，P 表示 Parent，C 表示子节点，连接到计算机的 1 表示计算机是 Electronics 的子节点，MySql 是 Computer Programming 的子节点。

我想通过 ajax 将多个选中的复选框值发送到我的控制器并根据选中的选中值过滤数据。

这是我的模型：

public class sample
{
    public int Id { get; set; }
    public string parent { get; set; }
    public virtual ICollection<childsample> childsamples { get; set; }
}

public class childsample
{
    public int childid { get; set; }
    public string child { get; set; }
}

我的观点（.cshhtml）：

@foreach (var sample in Model.sample)
{
    <label class="Parentlabel">
        <input type="checkbox" name="parentHeader" class="ParentHeader Right5" />
        @sample.parent 
    </label>
    <div class="bgContainer">
        @foreach (var child in @sample.childsamples)
        {
            <label class="childLabel">
                <input class="ChildHeader Right5" type="checkbox" name="childHeader" value="@child.child" />@child.child
            </label>
        }
    </div>
} 

我的控制器：

Public ActionResult filterData(int [] checkedIds) // if id is passed as paramter from ajax

谁能告诉我如何将这个多选复选框值发送到 我的控制器带有 ajax 并根据选中的复选框值过滤数据？

Answer 1

使用java脚本数组可以实现这个

要获得父 ID，您应该在子复选框中为父复选框分配一个值

HTML

<input type="checkbox" name="parentHeader" class="ParentHeader Right5" value="@sample.Id" /> @sample.parent 

Ajax 调用

在父类和子类中调用ajax函数

    $(".ParentHeader, .ChildHeader").click(function () {
        var parentValueToPush = new Array();
        var childValueToPush = new Array();

        // Parent checked check box value
        $('.ParentHeader:checked').each(function () {
            parentValueToPush.push($(this).val());
        });

        // Child checked check box value
        $('.ChildHeader:checked').each(function () {
            childValueToPush.push($(this).val());
        });

        var obj = {
            ParentCheckedIds: parentValueToPush,
            ChildCheckedIds: childValueToPush,
        };
        $.ajax({
            url: '/Home/filterData',
            contentType: 'application/json; charset=utf-8',
            type: 'POST',
            data: JSON.stringify(obj),
            cache: false,
            success: function () {
            },
            error: function (xhr, status, error) {
                alert("Error");
            }
        });
    });

控制器

    public void filterData(List<int> ParentCheckedIds, List<int> ChildCheckedIds) 
    {
     // Code
    }