Ajax.BeginForm OnBegin 确认通过 jquery modal答案

【问题标题】：Ajax.BeginForm OnBegin confirmation Via jquery modalAjax.BeginForm OnBegin 确认通过 jquery modal
【发布时间】：2011-04-06 20:31:38
【问题描述】：

我正在使用 jQuery UI 对话框。我有一个删除表格如下：

@using (Ajax.BeginForm("DeleteUser", "Administrator", new { id = Model }, new AjaxOptions { OnSuccess = "Deleted", OnBegin = "DeletingUser" }, new { id = "frm" + Model, name = Model }))
{
    <input type="submit" value="" />
}

我希望在发送ajax请求之前，弹出一个模态确认，用户选择是或否。

这是我的 javascript：

<script>
function DeletingUser(){
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            "Delete all items": function() {
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
            //I need to return a true or false here depending on the button clicked.
}
</script>



<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

从 javascript 代码中可以看出，对话框是异步打开的，这会导致该方法不返回任何内容，并且无论如何都会提交表单，而无需用户选择是或否。我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery asp.net-mvc asp.net-mvc-3

【解决方案1】：

您可以使用普通的Html.BeginForm 并使用 jquery 对其进行 AJAXify。与Ajax.BeginForm 助手相比，您将拥有更多控制权：

@using (Html.BeginForm(
    "DeleteUser", 
    "Administrator", 
    new { id = Model }, 
    FormMethod.Post, 
    new { id = "frm" + Model, name = Model }
))
{
    <input type="submit" value="" />
}

然后简单地在一个单独的 javascript 文件中：

$(function() {
    $('form[id^="frm"]').submit(function() {
        var $form = $(this);
        $('#dialog-confirm').dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                'Delete all items': function() {
                    $(this).dialog('close');
                    // the user confirmed => we send an AJAX request to delete
                    $.ajax({
                        url: $form.attr('action'),
                        type: $form.attr('method'),
                        data: $form.serialize(),
                        success: function(result) {
                            Deleted(result);
                        }
                    });
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        }
        return false;
    });
});

【讨论】：

【解决方案2】：

我认为表单正在提交，因为您的 DeletingUser 在发布时不可用。看到这个stackoverflow article（还没有解决方案）

【讨论】：

发现 an article 建议调用应该是 OnSuccess="function() { MessageConfirmation(); }" 但在不显眼的 ajax 库中出现运行时错误“预期标识符”而失败

【解决方案3】：

一个技巧。这是我的第一篇文章，我花了很多时间来解决这个问题，我认为这更容易：

 dialog:

function smOpenConfirmDialog(callBack) {
$("#noticeDialog").dialog({
    autoOpen: true,
    modal: true,
    autoOpen: false,
    draggable: false,
    buttons: {
        "Confirm": function () {
            callBack();
            $(this).dialog("close");
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

和

   $("input:submit").click(function (e) {
        smOpenConfirmDialog(function () {
            $("form").trigger('submit');
        });
        e.preventDefault();
    });

【讨论】：