当作为另一个对象的属性添加时，表单的JavaScript序列化不正确

Question

我能够序列化我的表单并将对象传递给我的MVC控制器。这是代码的缩减版本。

public void Test(ComplexType model)
{                
   // do stuff with model
}

使用JavaScript：

 $.ajax({
        type: 'POST',
        url: '/CmaTestRun/Test/',
        data: $('#theForm').serializeArray()
 }).......

然而，我意识到我需要传递附加数据以及序列化表格，所以我做了以下更改。

我创建了一个类，它将包含原始ComplexType和integer值，并将传递给控制器​​：

public class TestObject
{
   public int TestId { get; set; }
   public ComplexType TestModel { get; set;}
}

我的控制器动作：

 public void Test(TestObject model)
 {                          
 }

最后，在我的JavaScript中，我做了以下更改：

var TestObject = {
    TestId:99,
    ComplexType: $('#theForm').serializeArray()
}      

$.ajax({
    type: 'POST',
    url: '/CmaTestRun/Test/',
    data: TestObject
})

当我运行并进入控制器时，传递TestObject并且TestId为99.但是，尽管我的ComplexType具有正确的结构，但其属性都是null。

我应该如何更改代码以便正确填充所有内容？

编辑 - 序列化表格

这些属性与原帖有点不同。折叠的对象遵循与展开的对象相同的结构。

Answer 1

试试这个，首先序列化表单，然后推送额外的数据。

var params = $('#theForm').serializeArray();
params.push({name: 'testId', value: 99});
$.ajax({
    type: 'POST',
    url: '/CmaTestRun/Test/',
    data: params
})

你也可以使用jquery $ .param（）param

Demo

$(document).ready(function(){
var TestObject = {
    TestId:99,
    ComplexType: $('#theForm').serializeArray()
}  

var shallowEncoded = $.param( TestObject, false );
    var shallowDecoded = decodeURIComponent( shallowEncoded );
console.log(shallowEncoded);
    console.log(shallowDecoded);
})

这里是控制器：没什么可改变的。 Modelbinder会照顾它。

 [HttpPost]
        public ActionResult Test(TestObject)
        {


         }

如果你想让他们分开控制器：

[HttpPost]
public ActionResult Test(ComplexType model, int testId)
{                
   // do stuff with model
}

并保持模型像以前一样。 modelbinder从发布数据的http表单集合中填充模型。