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?

Have a look at this [solution](https://stackoverflow.com/questions/63807517/jquery-ajax-call-passed-parameter-always-null-in-asp-net-mvc-core/63807814#63807814). — Farid Huseynov, Sep 10 '20 at 10:07

Farid Huseynov · Answer 1 · 2020-09-12T19:39:47.363

2

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

edited Sep 12 '20 at 19:39

answered Sep 10 '20 at 10:31

Farid Huseynov

149
1
11

Thanks for the solution, I had already tried this before but it doesn't work. the model parameter is still not getting the data potentially because it's of time `UserView`. Can form data that has been serialized be bound in this way? – Yanayaya Sep 10 '20 at 10:40
I have edited the code, please try again. if it doesn't work please share the TestView, would like to see which fields it has – Farid Huseynov Sep 10 '20 at 10:44
It doesn't work. I think the difference between what you're proposing and what I have is that I'm passing seralized form data. As defined here ` var form = $(this).parents('.modal').find('form'); var dataToSend = form.serialize();`. – Yanayaya Sep 10 '20 at 10:50
I understand this, therefore what I'm saying is for you instead of sending the serialized data, in the function for example get again the values of the properties (either from html or from dataToSend for example) and save it in modelToSend with the fields that match the field names of the TestView itself. and then send this modelToSend with the selectedColumns. Just make sure that you also delete this dataType and contentType as I mentioned above – Farid Huseynov Sep 10 '20 at 10:54
@Yanayaya did you fix this? – Farid Huseynov Sep 12 '20 at 10:42

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

1 Answers1