.net Core MVC 淘汰赛 c#答案

【问题标题】：.net Core MVC Knockout c#.net Core MVC 淘汰赛 c#
【发布时间】：2018-01-10 02:08:06
【问题描述】：

尝试使用 Knockout 填充表格。

控制器：

public JsonResult GetAllStudents()
        {
            using (HttpClient client = new HttpClient())
            {
                client.BaseAddress = new Uri(_apiInfo.Urlapi);
                MediaTypeWithQualityHeaderValue contentType =
                    new MediaTypeWithQualityHeaderValue("application/json");
                client.DefaultRequestHeaders.Accept.Add(contentType);
                HttpResponseMessage response = client.GetAsync("/api/students").Result;
                string stringData = response.Content.ReadAsStringAsync().Result;
                if (response.IsSuccessStatusCode)
                {
                    return Json(stringData);
            }
            return null;
        }
    }

查看：

<table>
    <thead>
    <tr><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
    <tr>
        <td data-bind="text: $data.lastName"></td>
    </tr>
    </tbody>
</table>

脚本：

 function AppViewModel() {
        var self = this;
        self.people = ko.observableArray([]),
            $.ajax({
                type: "GET",
                url: '@Url.Action("GetAllStudents", "Konckout")',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    self.people(data);
                },
                error: function (err) {
                    alert(err.status + " : " + err.statusText);
                }
            });
        }
    ko.applyBindings(new AppViewModel());

我使用 alert(data) 测试了返回，得到以下结果：

[{"id":1,"lastName":"Alexander"},{"id":1,"lastName":"Mike"}]

但是表格中没有数据显示！

【问题讨论】：

出于好奇，为什么你有一个控制器可以调用 WebAPI 而不是直接从 javascript 调用 WebAPI？
我正在从另一个 WebAPI 服务获取数据。
您的 URL 值中有一个拼写错误，Konckout 而不是 Knockout。此外，您不能在无法编译的 .js 文件中使用 @Url....。您需要使用适当的路径，/Knockout/GetAllStudents
约翰，谢谢。 @Url 有效，我正在获取数据值。

标签： c# knockout.js asp.net-core

【解决方案1】：

如果你的alert(data); 确实给你一个看起来像[{"id":1,"lastName":"Alexander"},{"id":1,"lastName":"Mike"}] 的结果，那么你的ajax 调用可能会返回一个字符串而不是json。在将数据填充到 people 对象之前尝试解析数据。

self.people(JSON.parse(data));

jsFiddle

如果这样可以解决问题，那么我认为真正的问题是您的控制器方法对数据进行了双重编码。您从已经是 JSON 的外部 API 获得响应，然后通过在 JsonResult 中返回该响应来重新序列化该响应。基于此其他SO question，您应该更改控制器方法以返回 ContentResult 而不是 JsonResult。

【讨论】：

效果很好，感谢您抽出宝贵时间提供 jsFiddle 演示。
@hncl 欢迎。如果这有效，您应该更深入地了解为什么您的 ajax 方法将数据作为字符串而不是 json 返回。 JSON.parse 实际上只是一个创可贴。
@hncl 实际上这可能会有所帮助：stackoverflow.com/questions/5901411/…
很好的建议，使用 ContentResult 效果很好。感谢您的帮助。

【解决方案2】：

您在 applyBindings 上设置的视图模型与您正在填充的视图模型不同。

你可以试试这样的：

var data = [];   
var viewModel = {
    people: ko.observableArray(data)
};
ko.applyBindings(viewModel);

然后在成功回调上，你可以这样做：

viewModel.people(data);

另外我认为你不需要：self.people = ko.observableArray([]),。只需在请求的回调中填充它即可。

【讨论】：