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

MVC 3 Ajax.ActionLink with JQuery UI Confirm Dialog

提问by Shuaib

I have a @Ajax.ActionLink which calls a Delete Action. Now I want to use JQuery UI Dialog confirm instead the regular "Confirm" attribute of the Ajax link. I hook the event to the Ajax.ActionLink using the unobtrusive javaScript. But the action gets submitted and the e.preventDefault(); throughs an error. Can anyone tell me why this happens?

我有一个调用删除操作的 @Ajax.ActionLink。现在我想使用 JQuery UI 对话框确认而不是 Ajax 链接的常规“确认”属性。我使用不显眼的 javaScript 将事件挂接到 Ajax.ActionLink。但是操作被提交并且 e.preventDefault(); 通过一个错误。谁能告诉我为什么会这样？

Here is my jQuery code:

这是我的 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");
    });

---

---

Here is my MVC code:

这是我的MVC代码：

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

采纳答案by Shuaib

I ended up doing this: Change the Ajax.ActionLinkto Html.ActionLinkand in my JavaScript code I call $.get(theHREF, null, function () { refreshList() });

最后我做这个：更改Ajax.ActionLink到Html.ActionLink和我的JavaScript代码调用我$.get(theHREF, null, function () { refreshList() });

Here is the code:

这是代码：

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

Here is the MVC 3 ActionLink

这是 MVC 3 ActionLink

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

回答by Hamid Tavakoli

Here is how I have implemented the confirm functionality with jquery UI:

以下是我如何使用 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");
    });

} );

and in your html you can add the dialog div

在您的 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> 

your action link should look like this

您的操作链接应如下所示

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

回答by franco.cunza

You migth use the OnBeginproperty instead OnSuccess, this is just a simple example but it could help you, this is how I declare my Ajax.ActionLinklink:

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

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

And this could be a really simple implementation of the confirmDeletionfunction:

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

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

Regards.

问候。

回答by fireydude

I found that it was much easier to do this using a separate form, containing the post data, and a button which shows the dialog and then submits the form.

我发现使用包含发布数据的单独表单和一个显示对话框然后提交表单的按钮来执行此操作要容易得多。

cshtml (Razor):

cshtml（剃刀）：

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', '[email protected]');" />

javascripts (with jQuery UI Dialog):

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

回答by Phil.Wheeler

Try this instead:

试试这个：

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

I'd also strongly urge you to consider using the HttpDelete verb with any MVC postback or Ajax method.

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

回答by Alex

Maybe you can try calling a confirmation function from the OnBeginevent of Ajax.ActionLink? That way you can keep using the Ajax.ActionLink. The OnBegin even is marked up as data-ajax-beginattribute so have jquery assign "return YourConfirmationFunction()" to this attribute and you should be fine. Here's an example of using OnBegin for confirmation dialogwithout jquery.

也许你可以尝试从OnBeginAjax.ActionLink的事件中调用一个确认函数？这样您就可以继续使用 Ajax.ActionLink。OnBegin 甚至被标记为data-ajax-begin属性，所以让 jquery 将“return YourConfirmationFunction()”分配给这个属性，你应该没问题。这是使用 OnBegin 进行不使用 jquery 的确认对话框的示例。