敲除ajax.beginform回调

Question

我在表中使用了一个可观察到的敲除数组，每一行都有一个删除按钮包装在一个MVC Razor Ajax.BeginForm中。

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

如何才能在执行客户端删除之前等待postJson？如果我使用OnSuccess和OnFailure选项的Ajax.BeginForm -如何从数组中删除相关的$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>