mvc ajax.actionlink với hộp thoại jquery xác nhận

Question

Tôi có một bảng có một số hàng dữ liệu. Đối với mỗi hàng nó sẽ là một số liên kết hành động sẽ gọi một số phương thức (xóa dữ liệu, thay đổi trạng thái dữ liệu, vv ...)

Trước khi mỗi người dùng nhấp vào nút tôi muốn hộp thoại jquery hiển thị và cung cấp cho người dùng hộp thoại một số thông tin, một nút OK và Cancel.

Một số mã ví dụ của Ajax.ActionLink rằng sẽ gọi phương thức ChangeStatus:

<%= Ajax.ActionLink(item.Status, "ChangeStatus", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "ListReturns-Div", OnBegin = "StartChangeStatus", OnSuccess = "EndChangeStatus", OnFailure = "FailureChangeStatus" }, new { @class = "StatusBtn" })%> 

Đây là chức năng jquery đó được gọi là:

function StartChangeStatus(e) { 
      $('#dialog-confirm').dialog({ 
       resizable: false, 
       height: 200, 
       modal: true, 
       buttons: { 
        'Continue': function() { 
         $(this).dialog('close'); 
         $('#Loading-Div').show('slow'); 
        }, 
        Cancel: function() { 
         $(this).dialog('close'); 
         e.preventDefault(); 
        } 
       } 
      }); 
     } 

Các ActionLink và chức năng jquery làm việc. Nhưng vấn đề là tôi không thể tạm dừng/dừng hành động hiện tại khi nhấn vào liên kết hành động. Khi nút được nhấp vào bây giờ, quá trình lỗ đang chạy và nút xác nhận hộp thoại bị bỏ qua. Vì vậy, câu hỏi của tôi là làm thế nào để thay đổi actionlink hoặc chức năng jquery để làm việc như mong muốn với một xác nhận hộp thoại trước khi tiếp tục?

Answer 1

Tôi cũng đã thử mã của bạn, nhận được cùng một hành vi. Tôi đã sửa đổi mã của bạn để hiển thị hộp xác nhận.

<%= Ajax.ActionLink("Link", 
        "ChangeStatus", 
        new { id = 3 }, 
        new AjaxOptions { UpdateTargetId = "ListReturns-Div", 
             HttpMethod = "Post", 
             Confirm = "confirmClick" }, 
             new { @class = "StatusBtn" } 
        ) 
%> 

và hiển thị xác nhận javascript. Cần phải tìm lý do tại sao nó không hoạt động.

Answer 2

Từ my website:

Bây giờ, Ajax.ActionLink là thực sự hữu ích, và AjaxOption Confirm thậm chí còn nhiều hơn ... vẫn còn, ai muốn những Javascript Alert crappy những ngày này? Tôi đang phát triển một ứng dụng với Ms MVC 2 và tôi đang sử dụng thư viện JQueryUI tuyệt vời để tùy chỉnh hình ảnh của tất cả các phần tử của tôi. Một trong những điều tốt nhất mà JQueryUI có, là các cửa sổ hộp thoại ... giống như "Bạn có chắc chắn muốn xóa tệp này không? Có/Không" ... và tôi MUỐN SỬ DỤNG THEM trong LINK.ActionLink của tôi!

Vì tôi không tìm thấy câu trả lời trên mạng, tôi đã tìm kiếm một cách đơn giản để làm điều đó ... và bây giờ tôi đăng nó ở đây.

Đầu tiên: đọc và thực hiện trên trang của bạn những hướng dẫn tốt đẹp được viết bởi Ricardo Covo: "ASP MVC Xóa xác nhận với Ajax & jQuery UI Dialog" (Chỉ cần google nó)

tôi đã thực hiện những thay đổi đơn giản để mã Javascript của mình, chỉ cần sử dụng remove() thay vì ẩn ('nhanh') và áp dụng một lớp "mục" vào tr để xóa.

deleteLinkObj.closest("tr").hide('fast') 

trở thành

deleteLinkObj.closest("tr.item").remove(); 

Bây giờ, sau khi bạn làm theo các hướng dẫn trước, bạn đã sẵn sàng để thay thế hàng

<%: Html.ActionLink([LinkName],[ActionName], new { id = item.Id }, new { @class = "delete-link" })%> 

với

<%:Ajax.ActionLink([LinkName],[ActionName],[ControllerName],new { id = item.Id },new AjaxOptions{HttpMethod = "Delete" /*You can use Post though*/,OnBegin = "JsonDeleteFile_OnBegin" /*This is the main point!*/}, new { @class = "delete-link" }) %> 

Bạn có thể sử dụng Đăng phương thức nếu bạn thích t o, điều quan trọng ở đây là lựa chọn OnBegin, mà các cuộc gọi một javascript có thể ngăn chặn các hành động máy chủ để được gọi trước khi jQueryUI Dialog xác nhận:

<script language="javascript">function JsonDeleteFile_OnBegin(context) {return false;/*Prevent the Ajax.Action to fire before needed*/}</script> 

Đặt javascript trên trang. Vì vậy, bây giờ những gì sẽ xảy ra: Khi bạn nhấp vào nút Xóa, nó sẽ mở JQueryUI trong khi gọi chức năng OnBegin (mà hủy bỏ các hành động bài bình thường). Trong trường hợp "Xác nhận", mã của Ricardo Covo sẽ kích hoạt hành động phía máy chủ và trong mã xác nhận Javascript của Ricardo Covo, bạn có thể thực hiện tất cả các hành động trong trường hợp Thành công (như ẩn hàng xóa).

Chú ý: Với phương pháp này, bạn phải quản lý chức năng thành công/thất bại trong mã javascript của Ricardo Covo, vì AjaxSpcess OnSuccess và OnComplete sẽ không được kích hoạt (có thể được ghi đè bởi một số mã).