当我在 ASP.NET Core 中发送多个属性时，如何使用 Ajax 将数据发布到控制器模型？

Question

这是我以前从未遇到过的事情，我正在使用 Ajax 和 jQuery 将表单数据发布到我的控制器操作。我面临的问题是我从表单发送的数据不会自动绑定到控制器中的模型类，我想知道如何实现。

到目前为止，这是我的代码，请注意placeholderElement 是我脚本中其他地方定义的模式。

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

您将从上面的代码中看到，我获取了表单数据并将其序列化以准备发布。我还从启用了选择的 kendoui 网格中获取值。然后我将这两组信息发布到我的控制器：

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

这是我的控制器。收到columns 没有任何问题，但我希望data: dataToSend 绑定到UserView model，但它没有。

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

我做错了什么以及如何将dataToSend 绑定到model？

Answer 1

有我在 cmets 部分提到的解决方案，它是如何由 Microsoft 文档指定的。或者您可以通过以下选项更轻松地进行操作，而不是 form.serialize()，最好在通过 ajax.post 发送之前在脚本本身中获取数据。例如，它可以在函数内部完成

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