mvc ajax.actionlink 与 jquery 对话框确认

Question

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

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

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

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

来自my website：

现在，Ajax.ActionLink 真的很有用，而且 Confirm AjaxOption 更...不过，这些天谁想要那些糟糕的 Javascript Alert？ 我正在使用 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 的 Confirmation javascript 代码中，您将能够在成功的情况下执行所有操作（例如隐藏行删除）。

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