Question

我在表中使用了一个knockout observable数组，每一行都有一个包含在MVC Razor Ajax.BeginForm中的删除按钮。

删除按钮调用一个javascript函数，该函数执行ko.utils.postJson将id发送到服务器，以便在服务器上删除记录，然后从viewModel中删除，以便更新UI。

如何在客户端删除之前等待postJson？如果我使用Ajax.BeginForm的OnSuccess和OnFailure选项 - 如何从阵列中删除相关的$ data？

remove函数有一个传入的引用，但如果我然后首先执行服务器端，如何将此引用传递给OnSuccess回调？

我知道我可能自己在remove函数中编写了一个.ajax调用，但是如果它工作的话，更喜欢使用Ajax.BeginForm。

感谢菲尔

Answer 1

将删除功能连接到项目的父级。

例如你可以做这样的事情

的Javascript

var itemObject = function(data){
    var self = this;

    this.Id = ko.observable(data.Id);
    .... etc ....
};

var baseViewModel = function(){
    var self = this;

    this.Items = ko.observableArray();

    this.Setup = function(items){
        //using underscore.js to map the items
        self.Items(_.map(items, function(item){
            return new itemObject(item);
        }));
    };

    this.deleteItem = function(item){
        $.ajax({
            url: "/api/v1/Item/" + item.Id(),
            type: "DELETE",
            success: function (data) {
                //Client side remove here
            },
            error: function (data) {
                //Whoops error time
            },
            complete: function (data) {
                //Turn of spinners or whatever here
            }
        });
    };
};

$(function(){
  var myApp = new baseViewModel();
  myApp.Setup(items);
  ko.applyBindings(myApp);
});

HTML

<div data-bind="foreach: Items">
    <div data-bind="text: Id"></div>
    <button data-bind="click: $parent.deleteItem">Delete</button>
</div>

Answer 2

Djbielejeski提出了一个很好的方法，但是如果你仍然希望使用Ajax.BeginForm来删除，你也可以将参数传递给OnSuccess方法。

您只需将id传递给OnSuccess方法即可。像这样：

@using(Ajax.BeginForm("action", "controller", new AjaxOptions { OnSuccess = string.Format("OnSuccess({0})", rowId) }) { ... your html ... })

上面的代码假设rowId是一个整数，如果它是guid或一个字符串，你将不得不用引号''包装。

在OnSuccess函数中，您将获得允许您从可观察数组中删除元素的id

function OnSuccess(id){
  // id is available here... and you can get your viewmodel with ko.dataFor function
}

淘汰ajax.beginform回调

2 个答案: