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

Question

我能够序列化我的表单并将对象传递到我的 MVC Controller 。这是代码的精简版本。

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

使用 JavaScript:

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

但是，我随后意识到我需要随序列化表单一起传递其他数据，因此我进行了以下更改。

我创建了一个类，它将保存原始的ComplexType和一个integer值并将其传递给 Controller ​​:

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

我的 Controller 操作:

 public void Test(TestObject model)
 {                          
 }

最后，在我的 JavaScript 中，我进行了以下更改:

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

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

当我运行并单步进入 Controller 时，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);
})

这是 Controller :没有什么可以改变的。 Modelbinder 会处理它。

 [HttpPost]
        public ActionResult Test(TestObject)
        {


         }

如果你想让它们在 Controller 中分开:

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

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