淘汰ajax.beginform回调

Question

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

Delete按钮调用一个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，该ID将允许您从可观察数组中删除元素

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