How do I post data to controller model using Ajax when I am sending more than one property in ASP.NET Core?

Question

This is something that I've never come across before, I am posting form data to my controller action using Ajax and jQuery. The issue I face is that the data I send from the form will not automatically bind to the model class in the controller and I was wondering how to accomplish that.

Here is my code so far, please note that placeholderElement is a modal defined elsewhere in my script.

placeholderElement.on('click', '[data-save="view"]', function (event) {
    event.preventDefault();

    //Form Data
    var form = $(this).parents('.modal').find('form');    
    var dataToSend = form.serialize();

    //Grid Selection
    var getColumns = $("#columnGrid tr.k-state-selected");
    var selectedColumns = [];

    //Iterate over selected grid values and add to array
    $.each(getColumns, function (e) {
        var row = $(this);
        var grid = row.closest(".k-grid").data("kendoGrid");
        var dataItem = grid.dataItem(row);
        selectedColumns.push(dataItem.Id);
    });

    //Post to controller
    console.log(selectedColumns)
    console.log(dataToSend)
    $.post({
        url: "/Position/AddCustomView/",
        data: {
            columns: selectedColumns,
            data: dataToSend
        },
        dataType: 'json',
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',   
        success: function (data) {                
        }
    });
});

You'll see from the above code that I get the form data and serialize it ready for posting. I also get the values from a kendoui grid that has selection enabled. I then post both these sets of information to my controller:

        data: {
            columns: selectedColumns,
            data: dataToSend
        },

Here is my controller. The columns are received without any problems but I expected data: dataToSend to bind to the UserView model and it doesn't.

public JsonResult AddCustomView(UserView model, string[] columns)
{
   //shortened for brevity.
}

What am I doing wrong and how do I bind dataToSend to model?

user_10666308 · Answer

There is the solution that I have mentioned in the comments section, how it is specified by the Microsoft documentation. Or you can go easier way by the below option, just instead of form.serialize() it is better to get the data in the script itself before sending via ajax.post. As an example it can be done inside the function

function postToController(){
//Post to controller
console.log(selectedColumns)
console.log(dataToSend)
var modelToSend = {
        "nameOfField1":"write here value for field 1",
        "nameOfField2":"write here value for field 2" 
//just as much fields as your model has
    };
 $.post({
    url: "/Position/AddCustomView/",
    data: {//the name of the values you send in post should match with those received in controller
        model: modelToSend,
        columns: selectedColumns
    }, 
    success: function (data) {                
    }
 });
}

How do I post data to controller model using Ajax when I am sending more than one property in ASP.NET Core?

1 Answers