使用 Ajax 将复杂对象发送到 Controller

Question

我有一个 MVC 应用程序，我试图通过 ajax 调用提交表单，同时还传入另一个复杂的 object。 这意味着我将 2 个复杂对象传递回 controller：表单数据和 object 数组。 问题是，如果我将 contentType 设置为“application/x-www-form-urlencoded”，但 object 数组作为 Z37A6259CC0C1DAE299A7866489DFF0BD. 如果我将 contentType 设置为“application/json”，则 object 数组将其变为 controller 就好了，但表单数据是 null。 所以我想我基本上需要将表单数据转换为json object。 这是我所拥有的：

视图模型：

Public FOO foo
{
     public ObjectBar BarObject {get; set;}
     public string BarString {get; set;}
     // more properties
}

Controller：

[HTTPPost]
Public ActionResult Submit(Foo viewModel, OtherObject[] dataSet)
{
     //do stuff
}

看法：

// bunch of fields

<script>

    function submitForm(e) {
        debugger;
        var dataSets = getGridData();
        var form = $("#formName").serialize();
        var data = JSON.stringify({ viewModel: form, dataSet: dataSets }); //this is close, need to convert form data to json

        return $.ajax({
            type: "POST",
            url: '@Url.Action("Submit", "Report")',
            data: data,
            contentType: 'application/json',
            processData: false,
        });
    }

    //some more javascript stuff
</script>

搜索堆栈溢出，似乎我需要做的就是将表单数据转换为 json 类似于

var jsonForm = JSON.parse(JSON.stringify(form));

但由于某种原因，这不起作用，即使我只是尝试将 jsonForm 传递给 controller 与 viewModel 参数。 我应该使用其他东西来转换，还是我只是错过了一些东西？

Answer 1

在堆栈溢出的这个答案的帮助下：

使用 jQuery 将表单数据转换为 JavaScript object

我发现了这个说法：

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

所以我更新了我的代码并结束了这个：

function submitForm(e) {
    debugger;
    var dataSets = getGridData();
    var form = $("#formName").serializeArray().map(function (x) { this[x.name] = x.value; return this; }.bind({}))[0];
    var data = JSON.stringify({ viewModel: form, dataSets: dataSets }); //this is close, need to convert form to json... now this works!


    return $.ajax({
        type: "POST",
        url: '@Url.Action("Submit", "Report")',
        data: data,
        contentType: 'application/json; charset=utf-8',
        processData: true,
    });