ASP.NET MVC Ajax Post thực hiện OnComplete Ngay cả khi xác nhận không hợp lệ

Question

Tôi có một biểu mẫu Ajax cho phép tôi tự động xóa các hàng khỏi một bảng bằng cách sử dụng AjaxOption OnComplete. Điều đó hoạt động rất tốt.

Vấn đề là ngay cả khi tôi nhấn "Hủy" trên hộp thoại xác nhận, nó vẫn thực thi javascript OnComplete. Vì vậy, các hình thức không đăng, nhưng có vẻ như nó đã làm cho người dùng (hàng được lấy ra khỏi bảng).

Bất kỳ ý tưởng nào? mã nguồn dưới đây:

onComplete JS:

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

Mẫu Mã số:

<% 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

Tham số onSuccess mất một chuỗi mang đến cho tên của một hàm được gọi, không phải là chức năng gọi thực tế . Vì vậy, bạn có thể vượt qua nó "fadeDel", nhưng không phải "fadeDel (5)". Khi bạn thực hiện một cuộc gọi Javascript, nó sẽ đánh giá nó ngay lập tức, do đó, nó thực hiện fadeDel (5) ngay khi bạn nhấp vào gửi, ngay cả trước khi cuộc gọi AJAX được thực hiện. Bạn có thể xác minh điều đó bằng cách gỡ lỗi bằng công cụ trình kiểm tra Firebug hoặc IE.

Nếu bạn muốn xử lý điều này bằng phương pháp OnSuccess, nó sẽ cần phải là phương thức không có bất kỳ tham số nào. Một cách để làm điều đó là lấy ID sản phẩm từ "this", đây sẽ là biểu mẫu gửi. Bạn có thể có thể phân tích nó từ ID Mẫu, hoặc chỉ bao gồm nó trong của hình thức Tiêu đề hoặc thuộc tính Name:

<% 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" /> 
<%} %> 

Sau đó, bạn có thể cập nhật fadeDel để kéo giá trị từ 'này':

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

Có nhiều cách khác để xử lý việc này - ví dụ một cuộc gọi jQuery.ajax() - nhưng một cuộc gọi OnSuccess không tham số sẽ hoạt động tốt.