Question

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

在每个用户点击按钮之前，我想要显示一个jquery对话框，并为用户提供一个包含一些信息的对话框，一个OK和Cancel按钮。

将调用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时，我无法暂停/停止当前操作。单击该按钮时，现在正在运行孔过程，并忽略对话框确认按钮。所以我的问题是如何在继续之前更改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非常有用，而且确认AjaxOption更多......但是，现在谁想要那些糟糕的Javascript Alert？我正在使用Ms MVC 2开发一个应用程序，我正在使用梦幻般的JQueryUI库来自定义所有元素的视觉效果。 JQueryUI最好的东西之一就是对话框窗口......比如“你确定要删除这个文件吗？是/否”......我想在我的Ajax.ActionLink中使用它们。

由于我没有在网上找到答案，我找了一个简单的方法来做...现在我把它发布在这里。

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

我对他的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放在页面上。

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

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

mvc ajax.actionlink与jquery对话框确认

2 个答案: