如何在 MVC 中使用带有 Ajax Actionlink 的自定义确认对话框答案

【问题标题】：How to use custom confirm dialog with Ajax Actionlink in MVC如何在 MVC 中使用带有 Ajax Actionlink 的自定义确认对话框
【发布时间】：2016-01-07 07:32:00
【问题描述】：

所以我尝试使用 Ajax.ActionLink 为表格中的每个条目创建一个删除按钮，但我不能使用默认的确认功能，我需要一个可以自定义的功能，下面我使用的是 Boostrap 模态但我没有我做得对，因为它是非阻塞的。
Actionlink

@Ajax.ActionLink("Delete", "Delete", new { id = item.ApplicationUser.Id },
    new AjaxOptions {
    HttpMethod = "Delete",
    OnBegin = "return confirmDeletion()"
    },
    new { @class = "delete-link" })

这是我尝试从 Modal 获得响应的函数，但我认为它不起作用（我的 JS 相当低级），即使它起作用我也不认为它会停止 Ajax 调用

    function confirmDeletion() {
        $('#myModal').modal('show');
        return document.getElementById("delete-btn").addEventListener("click", function () {
            $('#myModal').modal('hide');
            return false
        })
        return document.getElementById("cancel-btn").addEventListener("click", function () {
            e.preventDefault();
            $('#myModal').modal('hide')
            return true
        })
    }

关于如何让 Ajax 调用等待确认的任何想法？，我查看了 alertify 但看起来它是同样的问题，因为我相信它也是非阻塞的
此代码的实际问题：即使您单击取消，Ajax 也会运行

【问题讨论】：

这段代码现在有什么问题？
@ParthTrivedi 对不起，在帖子末尾添加了问题，但基本上是确认对话框不会在 ajax 之上
请检查我的回答。

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

添加Ajax.BeginForm 以发送id 以致电Delete 操作

@using (Ajax.BeginForm("Delete", null, new AjaxOptions() { HttpMethod = "GET", OnComplete = "DeleteComplete", OnFailure = "AjaxErrorPopup", OnBegin = "LoadMask(true)" }, new { id = "DeletePostForm" }))
{
    @Html.Hidden("id")
}

放置删除弹窗的常用函数

function DeleteLinkTemplate(SubmitFormID,Value) {
    return '<a class=\'fa fa-times fa-lg action-icon text-danger\' href=\'javascript:;\' onclick="CommonConfirmDelete(\'' + SubmitFormID + '\', ' + Value + ')">';
}

function CommonConfirmDelete(SubmitFormID, Value) {
    _CallbackName = SubmitFormID;
    _SubmitFormValue = Value;
    OpenDeleteConfirmDilog();
}

function OpenDeleteConfirmDilog() {
    OpenDilog('#CommonPopupTemplate');
    $("#CommonPopupTemplate .panel-title, #CommonPopupSubmit").html('Delete');
    $("#CommonPopupTemplate .panel-body").html(_CommonDeleteConfirmMessage);
}


function CommonPopupSubmit_Click() {
    if (_CallbackName.indexOf("#")==0||_CallbackName.indexOf(".")==0) {
        $(_CallbackName + " #id").val(_SubmitFormValue);
        $(_CallbackName).submit();
    }
    else {
        window[_CallbackName](_SubmitFormValue);        
    }
}

这里你必须从a 调用CommonConfirmDelete 标签删除链接
在您的当前页面中创建Ajax.BeginForm 以拨打电话Delete 行动
将formId 和您的ID 发送到delete in CommonConfirmDelete
在全局变量_CallbackName和_SubmitFormValue中设置SubmitFormID和Value。
使用该变量设置CommonPopupSubmit_Click

当$(_CallbackName).submit(); 从您的自定义弹出框中触发时。它执行Ajax.BeginForm 提交。 Custom Confirmationbox 一切正常。

【讨论】：

有点混乱，但我会试一试，看起来它会比我尝试过的更好，这意味着我不必编写 Ajax 调用
是的，它对我有用。只需按照步骤操作。这是第一次加载，然后通过 formId 和 delete id 到 CommonConfirmDelete
慢慢来，了解发生了什么。就像dynamic form submit。
Trivedi 我确实将您的回答标记为已回答，除非我还有其他事情要做？

【解决方案2】：

是的，确认对话框显然不会停止 ajax。 OnBegin 事件通常用于在 ajax 完成时显示一些进度条或等待对话框。您在这里要做的是在单击删除按钮时调用“ConfirmDeletion”，而不是进行 ajax 调用，并在“delete-btn”的 evenlistener 中的 confirmDeletion 中进行 ajax 调用。 Here 是您在那里进行 ajax 调用的方式。

【讨论】：

臭虫，我希望我不必编写自己的 Ajax 调用，但是我想到的唯一问题是获取 Id（它是一个带有多个删除按钮的表），所以我虽然可能使用隐藏字段，但知道更好的处理方法吗？

【解决方案3】：

技巧：当确认为真时触发点击事件并提交表单否则不要提交表单而不是在jquery中编写自己的ajax表单提交

注意：此示例使用 bootbox.js 显示自定义确认模式弹出窗口，使用 boostrap

@using (Ajax.BeginForm("ActionName", "ControllerName", new AjaxOptions()
    {
       OnBegin = "onBeginSaveFormDetail",
       OnComplete = "loaderhide",
       OnSuccess = "onSuccessFunction",
       OnFailure = "onFailureFunction"
    }))
    { 
      //form content

      <button class="btn btn-success js-submit-button" type="submit">Submit</button>
      <input type="hidden" id="isconfirm" />
     }

-- javascript

var onBeginSaveFormDetail = function (event) {
        if ($("#isconfirm").val()) {
            loaderfunction();
            return true;
        }

        return showBootBoxConfirmBox($(this));
    }



var showBootBoxConfirmBox = function($element){
        bootbox.confirm({
            title: "title",
            message: "Are you sure",

            buttons: {
                cancel: {
                    label: 'Cancel',
                    className: 'btn btn-outline-success'
                },
                confirm: {
                    label: 'I Confirm',
                    className: 'btn-success'
                }

            },
            callback: function (result) {
                if (result == true) {
                    //set hidden value isconfirm is true as user click true 
                    //otherwise it is false
                    $element.find("#isconfirm").val(true);

                    // find submit btn using  class ".js-submit-button "
                    $element.find('.js-submit-button').trigger("click");

                }
            }
        });
        return false;
    }

【讨论】：