如何在 MVC 中将自定义确认对话框与 Ajax Actionlink 一起使用

How to use custom confirm dialog with Ajax Actionlink in MVC

本文关键字：Ajax Actionlink 一起 对话框 确认 MVC 自定义      更新时间：2023-09-26

所以我正在尝试使用 Ajax.ActionLink 为表中的每个条目创建一个删除按钮，但我无法使用默认的确认功能，我需要一个我可以自定义的功能，下面我正在使用 Boostrap Modal，但我不瘦 k我做对了，因为它是非阻塞的。
行动链接

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

这是我尝试从模态获得响应的功能，但我认为它不起作用(我的 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 也会运行

添加一个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);        
    }
}
  1. 在这里你必须从a标签删除中调用CommonConfirmDelete链接
  2. 在当前页面中Ajax.BeginForm呼叫Delete行动

  3. 发送该formId和您的ID以delete CommonConfirmDelete

  4. 在全局变量_CallbackName和_SubmitFormValue中设置SubmitFormID和Value。

  5. 使用此变量在CommonPopupSubmit_Click中设置

当$(_CallbackName).submit();从自定义弹出框触发时。它执行Ajax.BeginForm提交。所有事情都可以使用自定义确认框正常工作。

是的，确认对话框显然不会停止 ajax。OnBegin 事件通常用于在 ajax 完成时显示一些进度条或等待对话框。您在这里要做的是在单击删除按钮时调用"ConfirmDelete"，而不是进行ajax调用，并在"delete-btn"的confirmDelete中甚至侦听器中进行ajax调用。以下是您在那里进行 ajax 调用的方法。

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

注意：此示例利用 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;
    }
相关文章：