model-view-controller - Knockout Js 字典显示 MVC

Question

我被困在我认为非常基本的事情上，因此我需要一些专业知识来帮助我完成这项任务。

我有一个字典，它以整数和字符串作为值来存储结果列表(我将在下面显示)。我的 View 模型和 Controller 有这个代码，将数据作为 JSON 字符串发布到 Knockout:

[ViewModel 代码]

public class ResultModel
{
    public Dictionary<int, string> dictResult { get; set; }
    public string dictResultJson { get; set; }

    public ResultModel()
    {
        dictResult = new Dictionary<int, string>();
    }
}

[cshtml文件的代码]

<h2>Results</h2>
<table>
    <tbody data-bind="template: { name: 'tblResult', foreach: dictResultJson() }"></tbody>
</table>

<script id="tblResult" type="text/html">
    <tr>
        <td data-bind="value: key"></td>
        <td data-bind="value: value"></td>
    </tr>
</script>

<script type="text/javascript">
    var ResultModel = function(m) {
        var self = this;
        self.dictResultJson = ko.observableArray(mapDictionaryToArray(m.DictJson));
    };

    function mapDictionaryToArray(dictionary) {
        var result = [];
        for (var key in dictionary) {
            if (dictionary.hasOwnProperty(key)) {
                result.push({ key: key, value: dictionary[key] }); 
            }  
        }

        return result;
    }

    var data = @(Html.Raw(Json.Encode(Model)));
    var dataFromServer = ko.utils.parseJson(data.dictResultJson);
    console.log(dataFromServer);  

    ko.applyBindings(new ResultModel(dataFromServer));
    console.log("apply binding");
</script>

在我的 cshtml 文件中，我正在解析从 MVC Controller 返回的对象并将其转换为数组。现在的问题是它没有显示任何数据，但变量 dataFromServer 包含正确的数据。它有这些数据:

对象 {1:“凯特”，3:“亚历克斯”，4:“简”}

现在，我应该如何循环这个 json Result 以便以表格格式显示它，例如

table

1 凯特

3 亚历克斯

4简

提前致谢

杰斯蒙德

Answer 1

如果要将表中的值显示为文本，则需要使用 text binding而不是 value

<tr>
    <td data-bind="text: key"></td>
    <td data-bind="text: value"></td>
</tr>

您的代码还有另一个问题。当您调用 new ResultModel(dataFromServer) dataFromServer已经包含正确格式的数据。所以你不需要 m.DictJson在 ResultModel功能:

var ResultModel = function(m) {
        var self = this;
        self.dictResultJson = ko.observableArray(mapDictionaryToArray(m));
};