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

can you show your spans data, pls?

Serge
– Serge

2021-01-24 14:06:26 +00:00
Commented Jan 24, 2021 at 14:06 — Serge
– Serge, Commented Jan 24, 2021 at 14:06
just updated the post, thanks

DarkW1nter
– DarkW1nter

2021-01-24 14:14:32 +00:00
Commented Jan 24, 2021 at 14:14 — DarkW1nter
– DarkW1nter, Commented Jan 24, 2021 at 14:14
Thanks, but I would like to seee your spans var .

Serge
– Serge

2021-01-24 14:31:55 +00:00
Commented Jan 24, 2021 at 14:31 — Serge
– Serge, Commented Jan 24, 2021 at 14:31

Serge · Accepted Answer · 2021-01-24 15:30:09Z

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.

edited Jan 24, 2021 at 15:30

answered Jan 24, 2021 at 14:38

Serge

44.4k4 gold badges26 silver badges53 bronze badges

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

5 Comments

DarkW1nter Over a year ago

thanks for the suggestions, both still passing null to the controller though

Serge Over a year ago

It works in my visual studio test. Can you check this - alert(JSON.Strigify(list)), pls?

DarkW1nter Over a year ago

the alert gives ["changed","SubGroupId-2","GroupId-1"] which is what I'd expect. this is how my ajax call looks: var memberGroups = { GroupId: list[0], SubGroupId: list[1], Status: list[2] } alert(JSON.stringify(list)); $.ajax({ url: "/umbraco/Api/OrganisationMemberGroupsDashboardApi/UpdateMemberToGroup", data: memberGroups, type: "POST", contentType: "application/json; charset=utf-8" })

Serge Over a year ago

Try to remove ContentType. I usually use it only for the special types. And Instead of done I usually use - success: function (result) { ...} . And did you try [FromForm] instead of [FromBody] or remove it at all?

DarkW1nter Over a year ago

removing the type did it, thanks for your time!

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related