CODEWITHSUNDEEP
c#jquery.netajaxasp.net-mvc
Trinity
Trinity

Reputation: 484

How to pass multiple json array to controller from ajax?

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

Upvotes: 1

Views: 1464

Answers (3)

Willy David Jr
Willy David Jr

Reputation: 9131

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

Upvotes: 0

tontonsevilla
tontonsevilla

Reputation: 2799

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!

Upvotes: 0

Athanasios Kataras
Athanasios Kataras

Reputation: 26362

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?

Upvotes: 1

Related Questions