POST KnockoutJS數據到MVC控制器不綁定

Question

我想要做一個映射KnockoutJS模型的帖子。我可以在調試時看到，JSON是正確的。但服務器顯示Product爲0（空）。雖然它確實包含1個項目。

MVC Controller：

[HttpPost] 
public ActionResult Test(MyModel model, FormCollection fc) 
{ 
    return RedirectToAction("index"); 
} 

的AJAX提交：

$('#btnSubmit').click(function (event) { 
     var theModel = ko.mapping.toJSON(viewModel); 
     debugger; 
     $.ajax({ 
      type: 'POST', 
      url: "@Url.Action("Test", "Home")", 
      data: theModel, 
      contentType: 'application/json; charset=utf-8', 
      success: function (result) { 
       if (!result.success) { 
        //alert(result.error); 
       } 
       else { } 
      } 
     }); 
    }); 

這部分JSON對象：

"Products":[{"Id":2,"Name":"bread"}] 

我在做什麼錯？

編輯：

public class MyModel 
{ 
    public int User { get; set; } 
    public string Address { get; set; } 
    public string ZipCode { get; set; } 
    public List<Product> Products { get; set; } 

} 

public class Product 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
} 

Answer 1

經過調查一些更與小提琴手，事實證明，我得到一個500錯誤此消息：

System.MissingMethodException: No parameterless constructor defined for this object. 

中加入參數的構造函數後模型，我仍然收到錯誤消息。這是因爲我的模型中有幾個SelectList。所以這就是爲什麼它不能與模型綁定。

找到了這個SO後的解決方案（查找克里斯S的答案）。希望在面對這個問題時也能幫助其他人。

Answer 2

這裏是一個完整的工作進行測試的例子（從控制器和張貼發送模型回）：

控制器

public ActionResult Test() 
{ 
    var model = new MyModel(); 
    model.Products = new List<Product> { new Product { Id = 2, Name = "bread" } }; 
    return View(model); 
} 

[HttpPost] 
public ActionResult Test(MyModel model, FormCollection fc) 
{ 
    // Count equals one 
    var count = model.Products.Count(); 
    return RedirectToAction("index"); 
} 

模型

public class MyModel 
{ 
    public int User { get; set; } 
    public string Address { get; set; } 
    public string ZipCode { get; set; } 
    public List<Product> Products { get; set; } 
} 
public class Product 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
} 

查看

@model MyModel 
<form method="post"> 
    <input id="btnSubmit" type="submit" value="submit" /> 
</form> 
<script src="~/Scripts/jquery-1.8.2.js"></script> 
<script src="~/Scripts/knockout-2.2.0.js"></script> 
<script src="~/Scripts/knockout.mapping-latest.js"></script> 
<script type="text/javascript"> 

    var Product = function (Id, Name) { 
     self = this; 
     self.Id = Id; 
     self.Name = Name; 
    } 

    var mapping = { 
     'Products': { 
      create: function (options) { 
       return new Product(options.data.Id, options.data.Name); 
      } 
     } 
    } 


    function MyModel(data) { 
     var self = this; 
     ko.mapping.fromJS(data, mapping, self); 
    } 

    var viewModel = new MyModel(@Html.Raw(Json.Encode(Model))); 

    $('#btnSubmit').click(function (event) { 
     event.preventDefault(); 
     var theModel = ko.mapping.toJSON(viewModel); 
     debugger; 
     $.ajax({ 
      type: 'POST', 
      url: "@Url.Action("Test", "Home")", 
      data: theModel, 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      success: function (result) { 
       if (!result.success) { 
        //alert(result.error); 
       } 
       else { } 
      } 
     }); 
    }); 

    </script>