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

Question

在上面的图像中P表示Parent和C表示子和1附加到计算机上表示计算机是电子的孩子同样MySql是计算机编程的孩子。

我想将带有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
    }