How do I send a JavaScript array to a controller in a .net core 3.1 application?

Question

The javascript side of things looks like this:

var self = this;
    self.services = ko.observableArray([]);

    self.saveServices = function () {
        if (self.services().length > 0) {
            
            var obj = JSON.stringify({ services: self.services() });

            $.ajax({
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: "POST",
                url: '/Business/SaveServices',
                data: obj,
                success: function (data) {
                    $("#saveModal").modal('show');
                    if (!data) {
                        $("#saveDetails").text('Processing error, please try again or email us.');
                        return;
                    } else if (data === "saved") {
                        $("#saveDetails").text('Saved changes.');
                        setTimeout(function () {
                            $('#saveModal').modal('hide');
                        }, 2500);
                    } else {
                        $("#saveDetails").text(data);
                    }
                },
                error: function (error) {
                    $("#saveModal").modal('show');
                    $("#saveDetails").text('Processing error, please try again or email us.');
                }
            });
        }
    }

Then my controller looks like this:

[HttpPost]
    public async Task<JsonResult> SaveServices([FromBody]SaveServicesRequest saveServicesRequest)
    {
        try
        {
            if (User.Identity.IsAuthenticated)
            {
                return Json("saved");
            }
            return Json("User is not authenticated.");
        }
        catch (Exception ex)
        {
            logger.Error(ex + ". Users Email address: " + User.Identity.Name);
            return Json("Processing error, please try again or email us.");
        }
    }
    public class SaveServicesRequest
    {
        public List<services> services { get; } = new List<services>();
    }
    public class services
    {
        public string service { get; set; }
    }

Am hitting the controller but the array of items I'm expecting is not returned (saveServicesRequest is empty), I cannot seem to pass an array in any form. Anyone see what am doing wrong? The data/json is being sent client side, think the problem might lie in how am building the json and receiving it.

Did you observe what data is passed from client to server using some network tracing tools? You can use network tab of developer tools of your browser to see what data is sent. — Chetan
– Chetan, Commented Jan 7, 2022 at 1:20

haldo · Accepted Answer · 2022-01-07 09:36:33Z

1

The problem is that you're initializing services to a new list in SaveServicesRequest. The properties should also have public getters and setters for model binding.

Try updating your class to:

public class SaveServicesRequest
{
    public List<services> services { get; set; }
}

edited Jan 7, 2022 at 9:36

answered Jan 7, 2022 at 1:18

haldo

17k8 gold badges57 silver badges61 bronze badges

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

2 Comments

CrazyLegs Over a year ago

It was the class that was the issue exactly as you mentioned, thank you :) the knockout client side aspect didn't like the that change above but am retrieving the data now so all good, thanks again

haldo Over a year ago

@MartinCooke Awesome! I was sure about the class change but I wasn't sure about the knockout change and added it to my answer later - have rolled back to original answer now. Glad you got it working!

Collectives™ on Stack Overflow

How do I send a JavaScript array to a controller in a .net core 3.1 application?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related