How can I make an Ajax Actionlink to call a bootbox dialog?

Question

I have a table containing a for loop inside my MVC View page. Each row has a delete button that contains this:

@Ajax.ActionLink("Delete", "DeleteRecord", new { id = item.Id }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "divlist" }) |

It works perfectly fine, but I'd like to implement a confirm dialog. I found that bootbox can be used for modal confirm dialogs but I'm just not sure how I can implement this:

// 1. When this is clicked, confirm
<a class="alert" href="#">Delete</a>

<script>
$(document).on("click", ".alert", function (e) {
    bootbox.confirm("Are you sure?", function (result) {
        if (result == true) {

            // 2. Do what ActionLink does depending on the ID

        }
    });
});

Any kind of help would be greatly appreciated.

Answer 1

AjaxOptions() has a 'confirm' option where you can set a confirm message.

AjaxOptions Opts = new AjaxOptions()
{
    Confirm = "Are you sure?"        
}

But you should not use the Ajax.ActionLink if you want to integrate a custom modal. Just make a link or @Url.Action and set the listener.

$('.class').click(function () {
    //open modal
    //if clicked yes
    $.ajax({
       ...
    });
});

Or try to use the OnBegin property of the AjaxOptions and set it to the modal window logic. And return false if they say no to the confirm.