mvc ajax.actionlink 与 jquery 对话框确认

Question

我有一个包含一些数据项行的表。对于每一行，都会有一些操作链接，它们将调用一些方法（删除数据项、更改状态数据项等...）

在每个用户单击按钮之前，我希望显示一个 jquery 对话框，并为用户提供一个包含一些信息的对话框，确定和取消按钮。

ajax.actionlink 的一些示例代码将调用 ChangeStatus 方法：

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

这是调用的 jquery 函数：

 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();
                    }
                }
            });
        }

actionlink 和 jquery 函数起作用。但问题是，单击操作链接时我无法暂停/停止当前操作。现在单击该按钮时，孔进程正在运行，并且对话框确认按钮将被忽略。所以我的问题是如何更改 actionlink 或 jquery 函数以在继续之前通过对话框确认按需要工作？

Answer 1

我也尝试过你的代码，得到相同的行为。我已修改您的代码以显示确认框。

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

它正在显示 javascript 确认。需要找到它不起作用的原因。

Answer 2

来自我的网站：

现在，Ajax.ActionLink 真的很有用，并且Confirm AjaxOption更重要的是……现在谁想要那些蹩脚的 Javascript Alert？
我正在使用 Ms MVC 2 开发一个应用程序，并且使用出色的 JQueryUI 库来自定义所有元素的视觉效果。 JQueryUI 拥有的最好的功能之一是对话框窗口...诸如“您确定要删除此文件吗？是/否”之类的窗口...并且我想在我的 Ajax.ActionLink 中使用它们！

由于我在网上没有找到答案，所以我寻找一种简单的方法来做到这一点......现在我将其发布在这里。

首先：阅读并在您的页面上实现 Ricardo Covo 编写的精彩教程：“ASP MVC 使用 Ajax 和 jQuery UI 对话框删除确认”（只需 google 即可）

我对他的 Javascript 代码进行了简单的更改，只需使用remove() 而不是hide('fast') 并将类“item”应用于要删除的 tr。

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

现在

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

，在您按照上一教程进行操作后，您就可以将行替换

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

为

<%: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" } ) %>

您可以使用 Post 方法（如果您愿意），这里重要的是 OnBegin 选项，它调用一个 javascript 来阻止调用服务器操作前
JQueryUI 对话框确认：

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

将 javascript 放置在页面上。

那么，现在会发生什么：当您单击“删除”按钮时，它将打开 JQueryUI，同时调用 OnBegin 函数（取消正常的后操作）。如果是“确认”，Ricardo Covo 的代码将触发服务器端操作，并且在 Ricardo Covo 的确认 javascript 代码中，您将能够执行成功时的所有操作（例如隐藏行删除）。

注意：使用此方法，您必须在 Ricardo Covo 的 javascript 代码中管理成功/失败的函数，因为 OnSuccess 和 OnComplete AjaxOptions 根本不会被触发（可能被某些代码覆盖）。