Question

I have an @Ajax.ActionLink which for which I would like display a confirmation dialog box only if certain conditions are met (user has unsaved changes). I created a javascript function that shows the confirmation dialog as needed, and returns true or false based on the response. I tied it into the onclick event of the ActionLink but a false result does not cancel the action. Here’s a sample of my code:

@Ajax.ActionLink("Done", .. , .. , 
                  new AjaxOptions() { UpdateTargetId = "MyContainerId"},
                  new { onclick = "ConfirmDone()" })

Here’s the javascript function

function ConfirmDone() {
    //for testing purposes we can always show the dialog box
    return confirm("Are you sure you want to lose unsaved changes?");
}

What’s the best approach to display a conditional confirmation dialog box for the Ajax.ActionLink?

Answer 1

Use the OnBegin event:

@Ajax.ActionLink("Done", "ActionName", 
    new AjaxOptions 
    { 
        OnBegin = "return ConfirmDone()", 
        UpdateTargetId = "MyContainerId" 
    })

You could also use the Confirm ajax option if all you need to do is pop up a confirm box. If you need to do more custom logic (or want to use a custom dialog) then you would need to use OnBegin.

Here is an example of using Confirm:

@Ajax.ActionLink("Done", "ActionName", 
    new AjaxOptions 
    { 
        Confirm= "Are you sure you want to do this?", 
        UpdateTargetId = "MyContainerId" 
    })