Ko ObservableArray对象未通过WebAPI更新

时间:2014-07-02 19:34:24

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

我有一个可观察的数组Object,它生成如下:

 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);
            }
        });

,所有相关对象在所有字段上显示为null。 enter image description here 我已经尝试了几乎所有组合来使 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 对象获取值,但其中的所有对象都为null enter image description here 我的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);
            }
        });

警报给了我这个回复

enter image description here

变量类

 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();
    }

我有工作

4 个答案:

答案 0 :(得分:3)

试试这个......

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({...});或者您最终只得到最终结果。

答案 1 :(得分:1)

将作业更改为:

    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))

答案 2 :(得分:0)

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

答案 3 :(得分:0)

使用此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();
}