POST KnockoutJS 数据到 mvc 控制器未绑定答案

【问题标题】：POST KnockoutJS data to mvc controller not bindingPOST KnockoutJS 数据到 mvc 控制器未绑定
【发布时间】：2013-12-09 16:15:53
【问题描述】：

我正在尝试发布映射的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; } 
}

【问题讨论】：

你能发帖MyModel吗？
我们使用 ko.dataFor stackoverflow.com/questions/14968565/…
@JoffreyKern，MyModel 已添加
我们可以看到您的Product 没有TypeId 的概念。它的属性为Id。但是，您发布的JSON 包含TypeId
尝试修复代表Product 的javascirpt 模型。将TypeId 替换为Id，反之亦然。

标签： javascript asp.net-mvc json asp.net-mvc-4 knockout.js

【解决方案1】：

这是一个完整的工作测试示例（从控制器发回模型并发布）：

控制器

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>

【讨论】：

我也在那里定义了dataType: 'json',，但这不起作用。我是从这篇文章中得到的：stackoverflow.com/questions/11050523/… 但这不起作用。在这种情况下，它不应该返回任何东西。只需重定向回索引页面。我宁愿做一个普通的帖子，而不是一个 AJAX 帖子。但是找不到一个很好的例子来说明如何使用KnockoutJS。
请尝试我的其他建议。按照这些步骤，我有一个工作示例。我知道你的意思，可以使用标准回发，但你必须知道模型绑定器期望的所有表单设置并确保敲除使它们保持同步。
所有 js 对象值必须匹配。对我来说最后一件事是模型绑定器映射它的数据类型。
它们都匹配，我没有碰任何其他对象，只是填充产品List<>。但它仍然没有绑定模型。做了你说的除了映射部分。这在某种程度上是行不通的。但对于这种情况应该没关系。
首先我必须更改 js 类型以匹配。从您之前的问题来看，它们有所不同，我使用相同的项目来使其正常工作。在我设置数据类型之前它不会起作用。这对我来说是关键部分。如果您按照上述操作，它可能会在浏览器中缓存并且它不起作用。你努力提神了吗？

【解决方案2】：

在使用 fiddler 进行了更多调查后，结果发现我收到了一条 500 错误消息：

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

在模型中添加无参构造函数后，还是报错。这是因为我的模型中有几个SelectList。所以这就是它无法绑定到模型的原因。

在SO 帖子中找到了解决方案（寻找 Chris S 的答案）。希望在遇到这个问题时也能对其他人有所帮助。

【讨论】：