Ajax.BeginForm OnBegin确认通过jQuery模态 [英] Ajax.BeginForm OnBegin confirmation Via jquery modal

问题描述

我使用jQuery UI对话框。我有一个删除形式如下：

I'm using jQuery UI dialog. I have a delete form as follows:

@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请求之前，一个模式确认弹出，用户选择是或否。

I want before the ajax request is sent, a modal confirmation pops up and the user selects a yes or no.

下面是我的javascript：

Here is my 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 code看到，对话框异步方式打开，这将导致该方法返回没有和形式越来越反正提交无需用户选择是或否。我该如何解决这个问题？

As seen in the javascript code, the dialog is opened asynchronously, which causes the method to return nothing and the form getting submitted anyways without the user selecting a yes or no. How do I fix this?

推荐答案

您可以使用普通的 Html.BeginForm 和AJAXify它使用jQuery。相较于 Ajax.BeginForm 帮助你将有更多的控制：

You could use a normal Html.BeginForm and AJAXify it with jquery. You will have much more control compared to an Ajax.BeginForm helper:

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

，然后只是一个单独的JavaScript文件：

and then in a separate javascript file simply:

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

这篇关于Ajax.BeginForm OnBegin确认通过jQuery模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！