淘汰 ajax.beginform 回调

Question

我在表中使用了一个可淘汰的可观察数组，每行都有一个包含在 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

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
}

Answer 2

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

例如你可以做这样的事情

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>