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

Question

在上图中，P 表示父级，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函数class

    $(".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
    }

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

how to send multiple selected checkbox checked value from nested loop with ajax?

ajax

checkbox

asp.net-mvc

jquery