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

Question

enter image description here

In above image P means Parent and C means child and 1 attached to computer indicated computer is child of Electronics likewise MySql is child of Computer programming.

I want to send multiple selected checkbox value with ajax to my controller and filter data based on selected checked value.

This is my model:

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; }
}

My view(.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>
}

My controller:

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

Can anybody tell me how do i send this multiple checked checkbox value to my controller with ajax and filter data based on checked checkbox value?

Golda · Accepted Answer · 2015-05-04 05:50:36Z

3

Use can achieve this using java script array

To get a parent ID you should assign a value for parent checkbox likewise in child checkbox

HTML

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

Ajax call

Call the ajax function in both parent and child 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");
            }
        });
    });

Controller

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

edited May 4, 2015 at 5:50

answered May 2, 2015 at 8:37

Golda

3,89110 gold badges39 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

I Love Stackoverflow Over a year ago

you can see in the image that my list consist of both parent and child and on each and every selection of checkbox i want to call my controller method.so my question is i need to handle individual event for both parent and child checkbox check event?

Golda Over a year ago

Are you want to send all the checked check box ID to controller every time user checked/unchecked the check box(both parent and child)?

I Love Stackoverflow Over a year ago

yes i want to send all the checked checkbox id to controller every time user checked/unchecked the checkbox of both parent and child and most importantly how to unhandle the check and uncheck event of both parent and child that is what i am not getting

Golda Over a year ago

I have edited the answer, now the controller will receive both parent and child IDs during the click event of parent and child check box

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related