Question posted in
You can find the official documentation here.

How to pass multiple json array to controller from ajax? – Jquery 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; }
}
Tags:

3

Answers


  1. 0

    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?

    Login or Signup to reply.
  2. 0

    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!

    Login or Signup to reply.
  3. 0

    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) { }
        });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search