带有JQuery UI确认对话框的MVC 3 Ajax.ActionLink

我有一个@Ajax.ActionLink，它调用删除操作。现在我想使用jQueryUI对话框确认，而不是Ajax链接的常规“确认”属性。 我使用不引人注目的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" }
                    )

请尝试以下方法：

$("[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
});

<>我也强烈敦促您考虑使用任何MVC回传或Ajax方法使用HTTPDELL谓词。

< P>我最后这样做： 将

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");
    });

这里是MVC3ActionLink

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

下面是我如何使用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> 

也许您可以尝试从Ajax.ActionLink的
OnBegin
事件调用确认函数？这样，您就可以继续使用Ajax.ActionLink。OnBegin甚至被标记为
dataajaxbegin
属性，因此让jquery将“returnyourconfimationfunction（）”分配给该属性，您就可以了。这是一个没有jquery的示例。
您可以使用
OnBegin
属性来代替
OnSuccess
，这只是一个简单的示例，但它可以帮助您，这就是我声明我的
Ajax.ActionLink
链接的方式：

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

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

<script>
    function confirmDeletion (e) {
        // Do something or validate inputs...
        e.preventDefault(); // This should prevent the event to fire...
    };
</script>


函数确认删除（e）{
//做点什么或验证输入。。。
e、 preventDefault（）；//这将防止触发事件。。。
};

关于。
我发现，使用一个单独的表单（包含post数据）和一个显示对话框然后提交表单的按钮来实现这一点要容易得多

cshtml（剃须刀）：

菲尔，谢谢你的回复。我厌倦了它，还将httpPost更改为HttpDelete。由于这是一个Ajax.ActionLink，它应该执行javaScript事件，而不是window.location.href=theHREF；这一行实际上将页面转发到url/Category/deleteConfixed/345，其中345是要删除的项目的id。你知道要执行什么javaScript来代替window.locaiton.href=theHREF吗？谢谢你的回复。我做的都是基于ajax的。因此，最初我将其命名为@Ajax.ActionLink，它不会触发警报。所以我把它改为Html.ActionLink，然后在我的对话框中关闭JavaScript函数，我调用ajax来删除记录。现在一切都正常了。@Hamid，很好的解决方案，但是当有一个参数/对象要发送回服务器时，这应该是如何工作的呢？没有任何事件传递到ConfirmDelete中供您阻止。
<script>
    function confirmDeletion (e) {
        // Do something or validate inputs...
        e.preventDefault(); // This should prevent the event to fire...
    };
</script>

using (Ajax.BeginForm("Deactivate", "Admin", 
    new AjaxOptions { OnComplete = "ReloadList();" }, 
    new {@id = "deactive-form-" + user.Id }))
{
<input type="hidden" name="id" value="@user.Id" />
}
<input type="button" class="btn" value="Deactivate" 
    onclick="return ShowConfirmDlgThenSubmitForm('dialog-deactivate', 'deactive-form-@user.Id');" />

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;
    }