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

Question

我有一个@ 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实现确认功能的方法:

$(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

<div id="dialog-confirm" title="Delete the item?" > 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p> 
</div> 

您的操作链接应如下所示

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

Answer 2

我最终这样做了：将我调用的 JavaScript 代码中的更改Ajax.ActionLink为和Html.ActionLink$.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"
                    })