MVC 3 Ajax.ActionLink与JQuery UI确认对话框

我有一个@ Ajax.ActionLink，它调用一个删除操作。 现在我想使用JQuery UI Dialog来确认Ajax链接的常规“Confirm”属性。 我使用不显眼的javaScript将事件挂钩到Ajax.ActionLink。 但是提交的动作和e.preventDefault（）; 通过一个错误。 谁能告诉我为什么会这样？

这是我的jQuery代码：

$("[data-dialog-confirm]").click(function (e) { e.preventDefault(); var theHREF = $(this).attr("href"); $("#dialog-confirm").dialog('option', 'buttons', { "Delete this item": function () { window.location.href = theHREF; $(this).dialog("close"); }, "Cancel": function () { $(this).dialog("close"); } }); $("#dialog-confirm").dialog("open"); }); 

---

这是我的MVC代码：

  @Ajax.ActionLink("Delete", "DeleteConfirmed", new { id = item.Id }, new AjaxOptions { HttpMethod = "POST", OnSuccess = "refreshList" }, new {data_dialog_confirm="true" } ) 

Answer 1

以下是我使用jquery UI实现确认function的方法：

 $(document).ready( function () { $("#dialog-confirm").dialog({ autoOpen: false, modal: true, resizable: false, height:180, }); $(".deleteLink").click(function(e) { e.preventDefault(); var targetUrl = $(this).attr("href"); $("#dialog-confirm").dialog({ buttons : { "Confirm" : function() { window.location.href = targetUrl; }, "Cancel" : function() { $(this).dialog("close"); } } }); $("#dialog-confirm").dialog("open"); }); } ); 

并在您的HTML中，您可以添加对话框div

 
 
This item will be deleted. Are you sure?
  

您的操作链接应如下所示

 @Html.ActionLink("Delete", "UpdateDelete", new { id = item.Id }, new { @class = "deleteLink" }) 

Answer 2

我最终这样做：将Ajax.ActionLink更改为Html.ActionLink并在我的JavaScript代码中调用$.get(theHREF, null, function () { refreshList() });

这是代码：

  $("#dialog-confirm").dialog({ autoOpen: false, resizable: false, width: 500, modal: true, buttons: { "Delete this item": function () { $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); } } }); $("[data-dialog-confirm]").click(function (e) { e.preventDefault(); var theHREF = $(this).attr("href"); $("#dialog-confirm").dialog('option', 'buttons', { "Yes": function () { $.get(theHREF, null, function () { refreshList() }); $(this).dialog("close"); }, "No": function () { $(this).dialog("close"); } }); $("#dialog-confirm").dialog("open"); }); 

这是MVC 3 ActionLink

  @Html.ActionLink("Delete", "DeleteConfirmed", "Category", new { id = item.Id }, new { data_dialog_confirm = "true" }) 

Answer 3

您使用OnBegin属性而不是OnSuccess ，这只是一个简单的示例，但它可以帮助您，这就是我声明我的Ajax.ActionLink链接的方式：

 @Ajax.ActionLink("Delete", "DeletePeriod", "ConfigPeriod", new { area = "Budget", id = Model.Id }, new AjaxOptions { HttpMethod = "Post", OnBegin = "confirmDeletion" }) 

这可能是confirmDeletion函数的一个非常简单的实现：

问候。

Answer 4

试试这个：

 $("[data-dialog-confirm]").click(function (e) { var theHREF = $(this).attr("href"); $("#dialog-confirm").dialog('option', 'buttons', { "Delete this item": function () { window.location.href = theHREF; $(this).dialog("close"); }, "Cancel": function () { $(this).dialog("close"); } }); $("#dialog-confirm").dialog("open"); return false }); 

我还强烈建议您考虑将HttpDelete动词与任何MVC回发或Ajax方法一起使用。

Answer 5

也许您可以尝试从OnBegin事件中调用确认函数？ 这样你可以继续使用Ajax.ActionLink。 OnBegin甚至被标记为data-ajax-begin属性，因此让jquery为此属性赋值“return YourConfirmationFunction（）”，你应该没问题。 这是一个使用OnBegin进行确认对话而没有jquery的示例 。

Answer 6

我发现使用包含post数据的单独表单和显示对话框然后提交表单的按钮更容易做到这一点。

cshtml（剃刀）：

 using (Ajax.BeginForm("Deactivate", "Admin", new AjaxOptions { OnComplete = "ReloadList();" }, new {@id = "deactive-form-" + user.Id })) {  }  

javascripts（使用jQuery UI Dialog ）：

 function ShowConfirmDlgThenSubmitForm(dialogId, formId) { $('#' + dialogId).dialog({ resizable: false, height: 180, modal: true, buttons: { "Okay": function () { $(this).dialog("close"); $('#' + formId).submit(); }, Cancel: function () { $(this).dialog("close"); } } }); return false; }