MVC中使用jQuery Dialog确认框的Ajax.ActionLink

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函数按照所需方式工作？

- Webking

---

如果您需要为输入类型为submit的确认对话框，可以使用此处提供的代码：http://awesome.codeplex.com/ - Omu

Answer 1

我也尝试了您的代码，出现了相同的行为。我修改了您的代码以显示确认框。

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

并且它正在显示JavaScript确认框。需要找出为什么它不起作用。

- Elangovan

---

如此简单，应该被选为答案。 - jonprasetyo

Answer 2

来自我的网站:

Ajax.ActionLink非常有用，而确定AjaxOption甚至更有用......然而，这些垃圾JavaScript警报谁还想要呢？我正在开发一个Ms MVC 2应用程序，并且我正在使用fantastic 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根本不会被触发（可能被某些代码覆盖）。

- fgpx78

---

为什么是-1？我认为这是一个有用的答案，对我来说今天像魅力一样工作（在迁移到MVC3之后也是如此）。 - fgpx78