Question

我正在尝试通过以下方式使用knockout.js创建一个Grid http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/

当我尝试将值从viwe发布到控制器时，我总是得到一个count = 0的值。但是当我尝试使用alert.it检查数据是否具有视图模型时，按预期进行。是否有任何人面临/修正了这个问题。请向我突出显示错误的位置。

她是我的模特。

public class GiftModel
{
    public string Title { get; set; }
    public string Price { get; set; }
}

COntroller中的代码：

         public ActionResult Index()
    {
        var initialState = new[] {
    new GiftModel { Title = "Head First C#", Price = "49.95" },
    new GiftModel { Title = "Head First Js", Price = "78.25" }
        };
        return View(initialState);
    }

    [HttpPost]
    public ActionResult Index(IEnumerable<GiftModel> gifts)
    {
        return View();
    }

以下是我在做的事情。

var initialData = @ Html.Raw（new System.Web.Script.Serialization.JavaScriptSerializer（）。Serialize（Model））;

var viewModel = { 
    gifts : ko.observableArray(initialData), 

    addGift: function () { 
        this.gifts.push({ Title: "", Price: "" }); 
    },

    removeGift: function (gift) { 
        this.gifts.remove(gift); 
    },

    save: function() { 
        var data = ko.toJSON(this.gifts);
        alert(data);
        ko.utils.postJson(location.href, { gifts: data });
    }
}; 

ko.applyBindings(viewModel,document.body);

我也尝试过普通的Ajax帖子。但我仍然得到同样的东西。

编辑：这里是我正在进入警报

[{“Title”：“Head First C＃”，“Price”：“49.95”}，{“Title”：“Head First Js”，“Price”：“78.25”}

更新：如果我直接通过弹出内容控制器就可以识别数据。

        var model = [{"Title":"Head First C#","Price":"49.95"},{"Title":"Head First Js","Price":"78.25"}];"Status": "Reserved" }];
        $.ajax({
            url: '/Grid/Index',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(model),
            success: function (result) {

            }
        });

Answer 1

最后，我实现了它。

我们需要在将数据发送到请求之前调用ko.toJS(this.gifts)。

这是工作代码。

var initialData = @ Html.Raw（Json.Encode（Model））;

var viewModel = { 
    gifts : ko.observableArray(initialData), 

    addGift: function () { 
        this.gifts.push({ Title: "", Price: "" }); 
    },

    removeGift: function (gift) {
        this.gifts.remove(gift);
    },

    Save : function () {

        var ViewModel = ko.toJS(this.gifts);


        $.ajax({
            type: "POST",
            url: "/Grid/Index",
            data: ko.toJSON(ViewModel),
            contentType: 'application/json',
            async: true,
            complete: function () {
                alert('success');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('Error');
            }
        });
    }
};

感谢Ivan.Srb，szpic。

Answer 2

尝试使用ko.toJS代替ko.toJSON。

<强>更新：
试试这个（而不是ko.utils.postJson）：

$.ajax({
        url: <your_url>,
        type: 'POST',
        contentType: "application/json",
        data: JSON.stringify(data)
    });

Answer 3

我只想问：你有模特：

public class GiftModel
{
    public string Title { get; set; }
    public double Price { get; set; }
}

为什么你在推出Price字符串时会加倍？

new GiftModel {/**/, Price = "78.25" }

在您提供的链接中，该行显示：

new GiftModel { /**/, Price = 78.25 }

我不是说这有助于解决您的问题。我只是好奇。

@Update

在此网页上：KnockOutJS Homepage 你可以找到这一行：

// To actually transmit to server as a regular form post, write this: 
ko.utils.postJson($("form")[0], self.gifts);

不使用ko.toJSON（数据）; 所以在你的情况下，这将是：

ko.utils.postJson(youradress,this.gifts)

检查一下：）

KO.Utils.PostJSon在Controller MVC 4中返回Null

3 个答案: