Question

所以我试图使用Ajax.ActionLink为表中的每个条目创建一个删除按钮，但我不能使用默认的确认功能，我需要一个我可以自定义的，下面我使用的是Boostrap Modal但是我没有我已经做好了，因为它没有阻挡的 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也会运行

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

此处您需要从CommonConfirmDelete标记删除中致电a 链路
在当前页面中设置Ajax.BeginForm以拨打电话Delete 操作
将formId和ID发送给delete CommonConfirmDelete
在全局变量SubmitFormID和Value中设置_CallbackName和_SubmitFormValue。
使用此变量在CommonPopupSubmit_Click

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

Answer 2

是的，确认对话框显然不会停止ajax。 OnBegin事件通常用于在ajax完成时显示一些进度条或等待对话框。你想要做的是打电话＆＃34;确认删除＆＃34;点击你的删除按钮，而不是进行ajax调用，并在你的＆＃34; delete-btn＆＃34;的evenlistener中的confirmDeletion中。做那个ajax电话。 Here就是如何在那里进行ajax调用。

Answer 3

技巧：当确认为true时触发点击事件并提交表单，否则不要提交表单，而不是在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;
    }

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

3 个答案: