How to pass multiple json array to controller from ajax?

Question

I have two json array. I'm trying to send these json array to my controller. When i want to send one of them, everything is fine but i couldnt't send second one. How can i fix it ?

Post function from view

function HobiIlgiAlanKaydetGuncelle() {

    var hobiler = $('#Hobiler').val(); // Json array of object
    var ilgiAlanlar = $('#IlgiAlan').val();

    $.ajax({
        url: "/Kullanici/HobiVeIlgiAlanlariniKaydetGuncelle",
        type: "POST",
        contentType: 'application/json; charset=UTF-8',
        dataType: 'json',
        data: {hobiler : hobiler,ilgiAlanlar : ilgiAlanlar},
        success: function (response) { }

    });
}

Controller

[HttpPost]
public async Task<JsonResult> HobiVeIlgiAlanlariniKaydetGuncelle([FromBody] List<HobilerVM> hobiler, List<IlgiAlanlarVM> ilgiAlanlar)
{
   //When I put second parameter, both of them comes with null    
}

HobilerVM

public class HobilerVM
{
    public int id { get; set; }
    public string value { get; set; }
}

IlgiAlanVM

public class IlgiAlanVM
{
    public int id { get; set; }
    public string value { get; set; }
}

Does this answer your question? [MVC3 & JSON.stringify() ModelBinding returns null model](https://stackoverflow.com/questions/7597892/mvc3-json-stringify-modelbinding-returns-null-model) `JSON.stringify({hobiler : hobiler,ilgiAlanlar : ilgiAlanlar})` should do it... — kapsiR, Aug 16 '20 at 11:01
I think this is useful for your problem: https://stackoverflow.com/questions/14407458/webapi-multiple-put-post-parameters — hassan.ef, Aug 16 '20 at 11:05
parameters have already stringify by tagify library. I can send without stringify when i send only hobiler. — Trinity, Aug 16 '20 at 11:07

Athanasios Kataras · Answer 1 · 2020-08-16T11:21:20.927

1

The issue is with the following line:

data: {hobiler : hobiler,ilgiAlanlar : ilgiAlanlar}

This is an object in javascript. The equivalent in c# should be:

public class MyData {
    public List<HobilerVM> hobiler;
    public List<IlgiAlanlarVM> ilgiAlanlar;
}

And then in your controller:

    [HttpPost]
    public async Task<JsonResult> HobiVeIlgiAlanlariniKaydetGuncelle([FromBody] MyData data)
    {
       //When i put second parameter, both of them comes with null    
    }

For more information, check Why does ASP.NET Web API allow only one parameter for POST method?

edited Aug 16 '20 at 11:21

answered Aug 16 '20 at 11:15

Athanasios Kataras

25,191
4
32
61

I did yours but still comes with null. – Trinity Aug 16 '20 at 11:23
Also not sending JSON when specifiying it as contentType – charlietfl Aug 16 '20 at 11:30
What did you mean ? – Trinity Aug 16 '20 at 11:35
Is all the data object null or just the second property? – Athanasios Kataras Aug 16 '20 at 11:50
When i put second parameter all data object comes with null. But there is no problem with when i send single parameter such as hobiler. – Trinity Aug 16 '20 at 12:01
@AthanasiosKataras: If @Trinity is using MVC 5 (or less), `[FromBody]` is not allowed in a MVC Controller, only in an API Controller. – Sagnalrac Aug 16 '20 at 12:50
Make sure that ilgiAlanlar is a serializable array before you assign it in javascript. – Athanasios Kataras Aug 16 '20 at 12:57
My guess is that it's not an array and thus the entire serialization fails – Athanasios Kataras Aug 16 '20 at 12:59

score 0 · Answer 2 · answered Aug 16 '20 at 11:47

Web API doesn’t allow you to pass multiple complex objects in the method signature of a Web API controller method — you can post only a single value to a Web API action method. This value in turn can even be a complex object. It is possible to pass multiple values though on a POST or a PUT operation by mapping one parameter to the actual content and the remaining ones via query strings.Reference: How to pass multiple parameters to Web API controller methods and How WebAPI does Parameter Binding

Solution

public class ComplexObject {
   property List<HobilerVM> Hobiler { get; set; }
   property List<IlgiAlanlarVM> IlgiAlanlar { get; set; }
}

[HttpPost]
public async Task<JsonResult> HobiVeIlgiAlanlariniKaydetGuncelle([FromBody] ComplexObject data)
{
 //When i put second parameter, both of them comes with null    
}

Happy coding, cheers!

data: {hobiler : hobiler,ilgiAlanlar : ilgiAlanlar} change this to data: {hobiler : JSON.stringify(hobiler),ilgiAlanlar : JSON.stringify(ilgiAlanlar)} — tontonsevilla, Aug 16 '20 at 12:28

score 0 · Answer 3 · answered Aug 17 '20 at 02:53

I tried your code and it works fine for me except for some things.

First your second parameter has a different ViewModel on what you have posted on your code:

public class IlgiAlanVM
{
   public int id { get; set; }
   public string value { get; set; }
}

But on your parameter, you are using a different ViewModel:

([FromBody] List<HobilerVM> hobiler, List<IlgiAlanlarVM> ilgiAlanlar)

As you can see here, IlgiAlanVM is different on List<IlgiAlanlarVM>

Second, I just I used the same code but without the [FromBody]. So that would be:

//I already edited your List of Model here on the second parameter from IlgiAlanVM to IlgiAlanlarVM
[HttpPost]
public async Task<JsonResult> HobiVeIlgiAlanlariniKaydetGuncelle
                          (List<HobilerVM> hobiler, List<IlgiAlanlarVM> ilgiAlanlar)

Lastly, I just make sure it's an array of objects to make sure it will bind nicely on your list of models:

        var hobiler = [{
            id: 1,
            value: 'My Value'
        }];
            
        var ilgiAlanlar = [{
            id: 1,
            value: 'MyValue'
        }];

       $.ajax({
            url: '@Url.Action("HobiVeIlgiAlanlariniKaydetGuncelle", "Kullanici")',
            type: "POST",
            contentType: 'application/json; charset=UTF-8',
            dataType: 'json',
            data: JSON.stringify({ hobiler : hobiler, ilgiAlanlar : ilgiAlanlar }),
            success: function (response) { }
        });

How to pass multiple json array to controller from ajax?

3 Answers3