Sending Array Object Data in Javascript to ASP.NET Core Controller using AJAX ()

Question

I've tried all other solutions pertaining to the problem, but still can't find what i'm missing for my code. Here's my AJAX() Code.

var group = JSON.stringify({ 'listofusers': listofusers });

console.log("listofusers : " + JSON.stringify({ 'listofusers': group }));
(Assuming I have my listofusers object ready, and yes i've checked the console and it has data inside.)


$.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: "POST",
        url: url,

        data: group,
        success: function (data) {
            console.log("output : " + JSON.stringify(data));
            //doSend(JSON.stringify(data));
            //writeToScreen(JSON.stringify(data));
        },
        error: function (data) {
            console.log("error : " + JSON.stringify(data));
        },
    });

Here's my Server Side Controller.

[HttpPost]
public IActionResult GetMesssage(List<UserModel> listofusers)
{
var g = listofusers;
}

Just a simple fetch from the controller, so I could verify that the data from client side has really been sent.

I've tried the [FromBody] attribute, but still no luck in fetching the data from the server-side.

Answer 1

Here is a working demo like below:

1.Model:

public class UserModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

2.View(remove Content-type):

<script>
    var listofusers = [
            { id: 1, name: 'aaa' },
            { id: 2, name: 'bbb' },
            { id: 3, name: 'ccc' }
        ];
    var group = { 'listofusers': listofusers };
    console.log(group);
    $.ajax({
        dataType: 'json',
        type: "POST",
        url: "/home/GetMesssage",
        data: group,
        success: function (data) {
            console.log("output : " + JSON.stringify(data));
        },
        error: function (data) {
            console.log("error : " + JSON.stringify(data));
        },
    });
</script>

3.Console.log(group):

4.Result:

Update:

Another way by using json:

1.View(change group from JSON.stringify({ 'listofusers': listofusers }); to JSON.stringify(listofusers);):

<script>
    var listofusers = [
            { id: 1, name: 'aaa' },
            { id: 2, name: 'bbb' },
            { id: 3, name: 'ccc' }
    ];
    var group = JSON.stringify(listofusers);
    console.log(group);
    $.ajax({
        contentType:"application/json",
        dataType: 'json',
        type: "POST",
        url: "/home/GetMesssage",

        data: group,
        success: function (data) {
            console.log("output : " + JSON.stringify(data));
        },
        error: function (data) {
            console.log("error : " + JSON.stringify(data));
        },
    });
</script>

2.Controller(add FromBody):

[HttpPost]
public IActionResult GetMesssage([FromBody]List<UserModel> listofusers)
{
     //...
}

Answer 2

You can try this one.

First stringify the parameter that you want to pass:

$.ajax({
        url: url,
        type: "POST",
        data: {
            listofusers: JSON.stringify(listofusers),
        },
        success: function (data) {
        },
        error: function (error) {
        }
    });

Then in your controller:

[HttpPost]
public IActionResult GetMesssage(string listofusers)
{
   var jsonModel = new JavaScriptSerializer().Deserialize<object>(listofusers); //replace this with your deserialization code
}

What we're doing here is passing your object as a string then deserializing it after receiving on the controller side.

Hope this helps.

Answer 3

I found the solution to my problem guys, but I just want a clarification that maybe there's a work around or another solution for this one.

I've studied the data passed by "JSON.stringify();" from AJAX() and it's somehow like this.

"[[{\"ID\":0,\"UserID\":1014,\"Level\":\"support\",\"Department\":\"\",\"Facility\":\"Talisay District Hospital\",\"Firstname\":\"Joseph\",\"Middlename\":\"John\",\"Lastname\":\"Jude\",\"LoginStatus\":false,\"IPAddress\":\"192.168.110.47:12347\"},{\"ID\":0,\"UserID\":1014,\"Level\":\"support\",\"Department\":\"\",\"Facility\":\"Talisay District Hospital\",\"Firstname\":\"Joseph\",\"Middlename\":\"John\",\"Lastname\":\"Jude\",\"LoginStatus\":false,\"IPAddress\":\"192.168.110.47:15870\"}]]"

to which I was wondering that if the JSON format is a factor in parsing the data from the controller side. (Which of course is stupid since there's only one JSON format. (or maybe there's another, if there is, can you please post some source for reference.))

so I tried Serializing a Dummy Data in my model in "JsonConvert.Serialize()" Method and the output JSON data is like this.

[{"ID":0,"UserID":1014,"Level":"support","Department":"","Facility":"Talisay District Hospital","Firstname":"Joseph","Middlename":"John","Lastname":"Jude","LoginStatus":false,"IPAddress":"192.168.110.47:12347"},{"ID":0,"UserID":1014,"Level":"support","Department":"","Facility":"Talisay District Hospital","Firstname":"Joseph","Middlename":"John","Lastname":"Jude","LoginStatus":false,"IPAddress":"192.168.110.47:16709"}]

and I tried sending the output JSON Data from JsonConvert.Serialize() Method to controller via AJAX() and it worked! And I feel so relieved right now as this problem was so frustrating already.

If there's something wrong with what I found, please respond with what might be wrong or correct. Thank you!