Build and bind JSON collection to controller action's parameters using AJAX

Question

There are a lot of question like this, but I cannot find what I'm doing wrong in my specific case. I am trying to build a JSON collection of objects and bind it to my controller action's parameter.

At the moment, I am only trying to bind Name property to the list. The only issue I can think of might be my JSON collection structure.

AJAX:

function GetFilteredDatatablesValues() {
    var data = {
        Columns: []
    };

    for (var i = 0; i < 5; i++) {
        var column = {
            Name: "name" + i
        };
        data.Columns.push(column);
    }

    data = JSON.stringify(data);

    $.ajax({
        url: '/Client/DatatablesSearchTest',
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        data: data,
        error: function (response) {

        },
        success: function (data) {

        }
    });
}

Controller action:

public JsonResult DatatablesSearchTest(List<DataTableColumn> Columns) //Columns contains 0 items
{
    List<DataTableColumn> test = Columns;

    return Json(new { success = true });
}

Model:

public class DataTableColumn
{
    public int Data { get; set; }
    public string Name { get; set; }
    public bool Orderable { get; set; }
    public bool Searchable { get; set; }
    public Search Search { get; set; }
    public DataTableColumn()
    {
        Search = new Search();
    }
}

poke · Accepted Answer · 2020-04-21 21:45:59Z

1

The data you send looks like this:

{
    Columns: [
        { column 1 },
        { column 2 }
    ]
}

But the data the controller expects looks like this:

[
    { column 1 },
    { column 2 }
]

I would recommend you to always create a single model that reflects exactly what you want to send to the server. So your controller action would look like this:

[HttpPost]
public JsonResult DatatablesSearchTest(SearchModel model)
{
    List<DataTableColumn> test = model.Columns;
    return Json(new { success = true });
}

public class SearchModel
{
    List<DataTableColumn> Columns { get; set; }
}

answered Apr 21, 2020 at 21:45

poke

392k80 gold badges596 silver badges632 bronze badges

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

3 Comments

Lukas Over a year ago

Thank you, poke. I'm still having trouble with this. Columns remains of count 0. Would you mind providing more information, maybe how the object structure for JSON should be generated?

poke Over a year ago

A count of 0? So no null but there is an actual list and that list just has no items? Then you must be doing something else, or sending an empty array to begin with.

Lukas Over a year ago

Poke, you are right. I was initializing Columns = new List<DatatableColumn>() in the constructor. While I have things set up a bit differently now, your explanation helped me understand what was going on and I got it working. Thank you! And thank you again for the answers you provided in my past questions.

Mohammed Sajid · Accepted Answer · 2020-04-22 17:05:05Z

0

I confirm your code work well for .Net Framework, but not in .netcore:

The simple solution to fix the issue :

1 : Put the propertyList<DataTableColumn> Columns into RootModel:

public class RootModel
{
    public List<DataTableColumn> Columns { get; set; }
}

2 : Change the signature of the action, by adding [FromBody]RootModel rootModel like a parameter:

public JsonResult DatatablesSearchTest([FromBody]RootModel rootModel) //Columns contains 0 items
{
    //List<DataTableColumn> test = Columns;

    return Json(new { success = true });
}

Note that, without [FromBody] will gives you null object.

I hope this help you fix the issue.

edited Apr 22, 2020 at 17:05

answered Apr 21, 2020 at 22:47

Mohammed Sajid

4,9132 gold badges18 silver badges22 bronze badges

4 Comments

Lukas Over a year ago

Yes I have and thank you for the answer. But I just cannot get this to work.

Mohammed Sajid Over a year ago

@Lukas your project is .NetCore or .NetFramework? this solution work just fine for .netcore application.

Lukas Over a year ago

It is a .NetCore project. I will continue to figure it out.

Lukas Over a year ago

Sajid, this worked. Out of habit, I had put a constructor in the RootModel that initialized a Columns = new List<DatatableColumn>(). I removed it and it worked. Thank you Sajid!

Collectives™ on Stack Overflow

Build and bind JSON collection to controller action's parameters using AJAX

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related