Ko ObservableArray 对象未通过 WebAPI 更新答案

【问题标题】：Ko ObservableArray object not updating Via WebAPIKo ObservableArray 对象未通过 WebAPI 更新
【发布时间】：2014-08-23 17:51:36
【问题描述】：

我有一个像这样生成的可观察数组对象：

 self.SelectedVariable = ko.observableArray();
    self.VarUpdate = function (data) {
        $.getJSON("/api/Variable/" + ko.toJS(data.VarID), ko.toJS(data.VarID), function (Result) {
            for (var i = 0; i < Result.length; i++) {
                element = Result[i];
                self.SelectedVariable({ VariableID: ko.observable(element.VariableID), VariableDateLastUpdated: ko.observable(element.VariableDateLastUpdated), VariableName: ko.observable(element.VariableName), VariableDescription: ko.observable(element.VariableDescription), VariableValue: ko.observable(element.VariableValue), VariableType: ko.observable(element.VariableType) });
            };
        });

当我尝试使用此 AJAX 调用将 SelectedVariable 对象传递给我的 WebAPI 方法时

  $.ajax({
            url: "/api/Variable?Del=0",
            data: { vardata: ko.toJS(self.SelectedVariable) },
            type: "PUT",
            dataType: "JSON",
            timeout: 10000,
            success: function (Result) {

            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });

，所有相关对象的所有字段都显示为空。我已经尝试了几乎所有组合以使 SelectedVariable 对象正确解析为我的 WebAPI 方法：

data: { vardata: ko.toJS(self.SelectedVariable) },

data: { vardata: ko.toJSON(self.SelectedVariable) },

data: { vardata: JSON.Stringify(self.SelectedVariable) },

data: { vardata: self.SelectedVariable },

并尝试使用以下方法在 WebAPI 端手动解密 JSON 对象：

    public void Put([FromUri] int Del, [FromBody]string vardata)
    {

        Variables vari = JsonConvert.DeserializeObject<Variables>(vardata);

        var Item = (from c in TMIRE.Variables
                    where c.VariableID == vari.VariableID
                    select c).First();

        if (Del == 0)
        {
            Item.VariableDateUpdated = DateTime.Now;
            Item.VariableName = vari.VariableName;
            Item.VariableDescription = vari.VariableDescription;
            Item.VariableValue = vari.VariableValue;
            Item.VariableType = vari.VariableType;

而且它仍然是空值。

任何建议将不胜感激！

更新

更改了我的 WebAPI 方法以反映如下：

 public void Put([FromUri] int Del, IEnumerable<Variables> vardata)
    {
        var Item = (from c in TMIRE.Variables
                    where c.VariableID == vardata.Select(x => x.VariableID).First()
                    select c).First();
        if (Del == 0)
        {
            Item.VariableDateUpdated = DateTime.Now;
            vardata.Select(a => Item.VariableName = a.VariableName);
            vardata.Select(b => Item.VariableDescription = b.VariableDescription);
            vardata.Select(c => Item.VariableValue = c.VariableValue);
            vardata.Select(d => Item.VariableType = d.VariableType);
        }

现在 vardata 对象获得了值，但其中的所有对象都为空我的 Ajax 方法如下所示：

 alert(ko.toJSON(self.SelectedVariable));
        $.ajax({
            url: "/api/Variable?Del=0",
            contenttype: "application/x-www-form-urlencoded",
            data: "=" + ko.toJSON(self.SelectedVariable()),
            type: "PUT",
            dataType: "JSON",
            timeout: 10000,
            success: function (Result) {

            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });

警报给了我这个响应

变量类

 public class Variables
{
    public int VariableID { get; set; }
    public DateTime VarialbeDateLastUpdated { get; set; }
    public string VariableName { get; set; }
    public string VariableDescription { get; set; }
    public string VariableValue { get; set; }
    public string VariableType { get; set; }

}

工作代码

通过使用这个 Ajax 调用

  $.ajax({
            url: "/api/Variable?Del=0",
            contenttype: "application/x-www-form-urlencoded",
            data: "=" + ko.toJSON(self.SelectedVariable),
            type: "PUT",
            dataType: "JSON",
            timeout: 10000,
            success: function (Result) {

            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });

然后使用Newtonsoft使用此方法反序列化WebAPI上的对象：

public void Put([FromUri] int Del, [FromBody]string vardata)
    {

        Variables vari = JsonConvert.DeserializeObject<Variables>(vardata.Substring(1, vardata.Length-2));

        var Item = (from c in TMIRE.Variables
                    where c.VariableID == vari.VariableID
                    select c).First();

        if (Del == 0)
        {
            Item.VariableDateUpdated = DateTime.Now;
            Item.VariableName = vari.VariableName;
            Item.VariableDescription = vari.VariableDescription;
            Item.VariableValue = vari.VariableValue;
            Item.VariableType = vari.VariableType;
        }
        else
        {
            Item.VariableDateUpdated = DateTime.Now;
            Item.VariableActive = false;
        }

        TMIRE.SaveChanges();
    }

我开始工作了

【问题讨论】：

在你打ajax调用之前，你有没有使用Chrome开发工具检查self.SelectedVariable的值？
我有，并且对象在客户端正确生成。我还在我的 Ajax 调用中添加并提醒，以查看 JSON 是否正确生成。它确实如此。这是我从客户端得到的 JSON { "VariableID": 4, "VariableName": "Admin EMail Address", "VariableDescription": "The Email Account for Administration Panel.", "VariableValue": "no_reply@themindisright.com", "VariableType": "String" }
WebAPI 不应该期待IEnumerable<Variables> vardate，因为您正在构建一个集合？

标签： c# asp.net json knockout.js asp.net-web-api

【解决方案1】：

试试这个...

public void Put([FromUri] int Del, IEnumerable<Variables> vardate){}

由于您要在客户端 self.SelectedVariable = ko.observableArray(); 上构建集合，因此您需要 API 来接收 IEnumerable。

在Ajax调用中，我认为最好使用：

data: { vardata: ko.toJSON(self.SelectedVariable) }

因为这将为您提供集合的 JSON 表示形式。

另外，在 KO 方面，您不应该将元素推送到集合中吗？ self.SelectedVariable.push({...}); 否则你只会得到最终结果。

【讨论】：

现在它 = 0。将我的 put 方法更改为像这样反映 public void Put([FromUri] int Del, [FromBody]IEnumerable<Variables> vardata) 和 ajax 到 data: { vardata: ko.toJSON(self.SelectedVariable) },
我在原问题中添加了更新部分
你可以只添加属性Variables类的代码吗？
添加到问题的底部。请记住，我使用的是数据库优先方法，而不是代码优先。
我反应太仓促了，不用管它。你是对的。

【解决方案2】：

将分配更改为此：

    self.SelectedVariable = ko.observableArray();
    self.VarUpdate = function (data) {
        $.getJSON("/api/Variable/" + ko.toJS(data.VarID), ko.toJS(data.VarID), function (Result) {
            var selection = self.SelectedVariable;
            for (var i = 0; i < Result.length; i++) {
                var element = Result[i];
                selection.push(element);
            };
        });

然后，将ajax方法改成json：

    $.ajax({
        url: "/api/Variable?Del=0",
        content-type: "application/x-www-form-urlencoded",
        data: "=" + JSON.stringify(ko.toJSON(self.SelectedVariable)),
        type: "PUT",
        dataType: "JSON",
        timeout: 10000,
        success: function (Result) {

        },
        error: function (xhr, status) {
            alert(status + " - " + xhr.responseText);
        }
    });

同时尝试删除[FromBody]。

public void Put([FromUri] int Del, IEnumerable<Variables> vardata)
{
    ...
}

看起来将 vardata 中的序列化对象作为 ko.observable 对象会混淆参数的 mvc 序列化。

尝试不同的数据分配：

data: "=" + JSON.stringify(ko.toJSON(self.SelectedVariable))

data: "=" + JSON.stringify(self.SelectedVariable())

data: "=" + self.SelectedVariable()

data: "=" + $.parseJSON(ko.toJSON(self.SelectedVariable))

【讨论】：

完全按照建议进行了更改。 vardata 仍然 = 0
还可以尝试添加内容类型，按照我最近的编辑中所述更改数据分配，然后从正文中删除。
它终于解析了对象，但是SelectedVariable中的所有值都是空的。
在$.ajax 之前使用客户端中self.SelectedVariable() 的值以及您为您的mvc 服务拥有的最新代码更新您的原始帖子。我会根据您的编辑更改我的回复。
我终于搞定了！请参阅工作代码部分感谢所有帮助。如果你发现自己在南非，我就来喝一杯！

【解决方案3】：

您传递的 self.SelectedVariable 不是数组。你不应该把它称为一个可观察的吗？否则，您需要使用 self.SelectedVariable.push(resultObject) 添加结果。

【讨论】：

vardata 显然没有正确解析...问题是，您正在将 self.SelectedVariable 转换为 JSON，但您的 vardata 仍然是 JS 对象...我建议您尝试仅传递对象...例如数据：ko.toJSON(self.SelectedVariable()
好的我明白了，但不确定如何正确实施？

【解决方案4】：

通过使用这个 Ajax 调用

       $.ajax({
        url: "/api/Variable?Del=0",
        contenttype: "application/x-www-form-urlencoded",
        data: "=" + ko.toJSON(self.SelectedVariable),
        type: "PUT",
        dataType: "JSON",
        timeout: 10000,
        success: function (Result) {

        },
        error: function (xhr, status) {
            alert(status + " - " + xhr.responseText);
        }
    });

然后使用 Newtonsoft 使用此方法反序列化 WebAPI 上的对象：

public void Put([FromUri] int Del, [FromBody]string vardata)
{

    Variables vari = JsonConvert.DeserializeObject<Variables>(vardata.Substring(1, vardata.Length-2));

    var Item = (from c in TMIRE.Variables
                where c.VariableID == vari.VariableID
                select c).First();

    if (Del == 0)
    {
        Item.VariableDateUpdated = DateTime.Now;
        Item.VariableName = vari.VariableName;
        Item.VariableDescription = vari.VariableDescription;
        Item.VariableValue = vari.VariableValue;
        Item.VariableType = vari.VariableType;
    }
    else
    {
        Item.VariableDateUpdated = DateTime.Now;
        Item.VariableActive = false;
    }

    TMIRE.SaveChanges();
}

【讨论】：