MVC 控制器返回 JSON 但未在 Knockout 中绑定答案

【问题标题】：MVC Controller returning JSON but not binding in KnockoutMVC 控制器返回 JSON 但未在 Knockout 中绑定
【发布时间】：2015-10-15 23:05:52
【问题描述】：

我正在尝试使用 MVC 控制器中的 JsonResult 进行简单绑定。 json 回来了，但敲除 observable 数组中的绑定确实有效。下面是我的代码。

如果我将 json 结果直接放到 observable 中，它就可以工作。我不确定我在这里缺少什么。

淘汰码

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/knockout-min.js"></script>
<script src="~/Scripts/knockout.mapping.js"></script>

var viewModel;
vmListModel = function () {
    var self = this;

    self.Products = ko.observableArray([]);

    self.GetData = function () {
        $.ajax({
            url: '@Url.Action("product", "employees")',
            cache: false,
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            data: {},
            success: function (rs) {
                console.log(rs);  //--> the data returns like this { Id: '1001', Name: 'xavier' }
                //self.Products({ Id: '1001', Name: 'xavier' });  // if I put this it binds
                ko.mapping.fromJS(rs, {}, self.Products);
                //self.Products(ko.mapping.fromJS(rs));
            }
        });
    }


};


$(document).ready(function () {
    viewModel = new vmListModel();
    ko.applyBindings(viewModel, $('#products1')[0]);
    viewModel.GetData();
});

HTML

<table id="products1">
<thead>
    <tr>
        <th>
            ID
        </th>
        <th>
            Name
        </th>
    </tr>
</thead>
<tbody data-bind="foreach:Products">
    <tr>
        <td data-bind="text:Id">
        </td>
        <td data-bind="text:Name">
        </td>
        <td>
        </td>
    </tr>
</tbody>

控制器代码

  public JsonResult Product()
    {
        string variablename = "{Id:'1001',Name:'xavier'}";
        return Json(variablename, JsonRequestBehavior.AllowGet);
    }

错误

未捕获的 ReferenceError：无法处理绑定“文本：函数（）{return Id}” 消息：ID 未定义

【问题讨论】：

您可以根据您的数据绑定逻辑jsfiddle.net/zNkhR/138 进行更改吗？我已经做了一个基本的设置。
不确定您的意思，但此数据来自控制器。我需要在控制器上做些什么吗？
我刚刚从 cmets 将结构复制到一个变量并初始化了视图模型。验证你从 action 方法中得到了相同的结构。
在console.log中我得到这个{Id:'1001',Name:'xavier'}，如果我签入observable我得到这个viewModel.Products() "{Id:'1001',Name:'xavier'}"
试试ko.mapping.fromJS(JSON.parse(rs), {}, self.Products);。您从 ajax 调用中返回字符串，您需要将其转换为对象，然后才能使用它调用 fomJS。

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

【解决方案1】：

您正在从控制器传递 string 类型的数据并尝试使用 mapping 插件进行转换，这在各种情况下都是错误的

FIX：构建一个数组并传递它。因此映射插件会将所有内容转换为可观察的，并且您可以完整地成功进行 2 路绑定。

控制器：

var data = new[] { new { Id = "1001", Name = "Nancy" }, new { Id = "1002", Name = "bunny" } };
return Json(data, JsonRequestBehavior.AllowGet);

希望有帮助

【讨论】：