How to use custom confirm dialog with Ajax Actionlink in MVC

Question

So I am trying to use the Ajax.ActionLink to make a Delete button for each entry in a table but I cant use the default Confirm function, I need one that I can customise, below I am using Boostrap Modal but I dont thin kthat i've done it right since it's non blocking.
Actionlink

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

This is the function ive made to try get a response from Modal but I dont think it works(my JS is pretty sub par), even if it did I don't think it would stop the Ajax call

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

Any ideas on how to get the Ajax call to wait for some confirmation?, I looked at alertify but looks like it ahs the same issue since it's also nonblocking I believe
Actual problem with this code: Ajax runs either even if you click cancel

Answer 1

Trick : Trigger click event when confirm is true and submit the form else don't submit the form instead of writing your own ajax form submit in jquery

Note: This sample utilizes bootbox.js to show custom confirm modal popup using 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;
    }

Answer 2

Add a Ajax.BeginForm to send id for make call to Delete Action

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

put common function for delete popup

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. Here You have to call CommonConfirmDelete from a tag delete link
2. Make a Ajax.BeginForm in your current page for call Delete Action

3. Send that formId and your ID to delete in CommonConfirmDelete

4. set SubmitFormID and Value in global variable _CallbackName and _SubmitFormValue.

5. Use this variable to set in CommonPopupSubmit_Click

When $(_CallbackName).submit(); fires from your custom popup box. It performs Ajax.BeginForm submit. and all things works fine with Custom Confirmationbox.

Answer 3

Yes the confirm dialog will obviously not stop the ajax. OnBegin event is generally used to show some progress bar or wait dialog while the ajax completes. What you want to do here is call "ConfirmDeletion" on the click of your delete button instead of making an ajax call and inside confirmDeletion in evenlistener of your "delete-btn" make that ajax call. Here is how you will be able to make an ajax call there.