javascript - passing an array from ajax call to controller, array empty in controller

Question

Can anyone suggest what I need to change here?

I'm getting classes from elements that contain the class 'changed', the classes I get contain id's that I want to pass to the controller method.

When I look in the network tab I can see the data I want in the payload, it looks like this:

{"list":["GroupId-1","SubGroupId-2","changed"]}

but when I put a breakpoint on the controller the list is null.

This is the class I'm expecting in the controller method:

public class MemberGroups
{
    public string GroupId { get; set; }
    public string SubGrouId { get; set; }
    public string Status { get; set; }
}

javascript for the save

function Savechanges() {
        var spans = document.getElementsByClassName("changed");
        var list = [];

        $.each(spans,
            function (key, value) {
                $.each(value.classList,
                    function (key, value) {
                        list.push(value);
                    });
            });
        var dataToPost = JSON.stringify({ list: list });

        $.ajax({
            url: "/umbraco/Api/OrganisationMemberGroupsDashboardApi/UpdateMemberToGroup",
            data:  JSON.stringify({ list }),
            type: "POST",
            contentType: "application/json; charset=utf-8", // specify the content type
        })
            .done(function (data) {
             
            });
    }

controller

public string UpdateMemberToGroup( List<MemberGroups> list)
{
    // save records
}

The spans are created dynamically and added to a treeview. When they are dragged and dropped all classes are removed then the 'changed' class is added along with the id classes so I only pass the ones I need to to the controller

var s = document.createElement('span');
s.classList.add('node-facility');
s.classList.add('ui-droppable');
s.classList.add('GroupId-' + value.GroupId);
s.classList.add('SubGroupId-0');
s.id=('GroupId-' + value.GroupId);
s.appendChild(document.createTextNode(value.GroupName));

question from:https://stackoverflow.com/questions/65871279/passing-an-array-from-ajax-call-to-controller-array-empty-in-controller

Answer 1

This variant was tested using postman body json - ["GroupId-1","SubGroupId-2","changed"]

Change your ajax data to this:

data:  list,

and your controller action:

public string UpdateMemberToGroup([FromBody] []string list)
{
var memberGroups = new MemberGroups
{
    GroupId =list[0],
   SubGrouId =list[1],
    Status =list[2]
};
    // save records
}

This variant was tested in postman using {"GroupId":"GroupId-1","SubGroupId": "SubGroupId-2", "Status":"changed"}

you can put the code in javascript:

var data={GroupId:list[0],SubGroupId:list[1], Status:list[2]}

......
....

data:data,
.....

your controler action in this case:

public string UpdateMemberToGroup([FromBody] MemberGroups memberGroups)
{
    // save records
}

And I don't know what version MVC you use , but for some versions instead of [FromBody] better to use [FromForm] or don't use anything at all.