淘汰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
}