ASP.NET MVC Ajax Post Ausführen von OnComplete auch wenn Bestätigung fehlschlägt

Question

Ich habe eine Ajax-Form, die ich dynamisch Zeilen aus einer Tabelle mithilfe der OnComplete AjaxOption entfernen können. Das funktioniert großartig.

Das Problem ist, dass selbst wenn ich im Bestätigungsdialog auf "Abbrechen" klicke, es weiterhin das OnComplete-Javascript ausführt. Das Formular wird also nicht hochgeladen, aber es sieht so aus, als wäre es dem Benutzer passiert (die Zeile wird aus der Tabelle entfernt).

Irgendwelche Ideen? Quellcode unter:

OnComplete JS:

function fadeDel(id) { 
    $("#product" + id).fadeOut(500); 
    } 

Form Code:

<% using (Ajax.BeginForm("DeleteProduct", "Commerce", new { id = product.Id }, 
    new AjaxOptions 
    { 
     OnSuccess = "fadeDel(" + product.Id + ")", 
     Confirm = "Are you sure you want to delete" + product.Title 
    }, new { id = "frm" + product.Id })) 
    { %> 
    <%= Html.SubmitImage("Delete", Url.Content("~/content/images/12-em-cross.png"))%> 
<%} %> 

Answer 1

Der OnSuccess Parameter einen String, der den Namen einer Funktion gibt zu nennen, nicht den eigentlichen Funktionsaufruf . Sie können also "fadeDel" übergeben, aber nicht "fadeDel (5)". Wenn Sie einen Javascript-Aufruf übergeben, wird dieser sofort ausgewertet. Daher wird fadeDel (5) ausgeführt, wenn Sie auf submit klicken, noch bevor der AJAX-Aufruf erfolgt ist. Sie können dies überprüfen, indem Sie mit Firebug- oder IE-Tester-Tools debuggen.

Wenn Sie dies mit einer OnSuccess-Methode behandeln möchten, muss es eine Methode sein, die keine Parameter akzeptiert. Eine Möglichkeit dazu besteht darin, die Produkt-ID von "this" zu entnehmen, was das einreichende Formular ist. Sie könnten entweder von der Formular-ID analysieren oder einfach schließen sie in den Titel oder Name-Eigenschaft des Formulars:

<% using (Ajax.BeginForm("DeleteProduct", "Commerce", new { id = product.Id }, 
new AjaxOptions 
{ 
    OnSuccess = "fadeDel", 
    Confirm = "Are you sure you want to delete" + product.Title 
}, new { id = "frm" + product.Id, name = product.Id })) 
{ %> 
    <input type="submit" name="Delete" /> 
<%} %> 

Dann können Sie fadeDel aktualisieren Sie den Wert von ‚this‘ ziehen:

function fadeDel() { 
    var id = this.name; 
    $("#product" + id).fadeOut(500); 
} 

Es gibt andere Möglichkeiten, damit umzugehen - z Ein jQuery.ajax() -Aufruf - aber ein parameterloser OnSuccess-Aufruf sollte funktionieren.