MVC: Javascript confirm for delete action not working

Question

I'm pretty new to MVC and Javascript; I'm trying to make a delete action work; I'm using an ActionLink with a Javascript function for confirmation. The JAvascript confirm doesn't work, the delete action is fired even when I press Cancel; additionally, I cannot seem to be able to use [HttpDelete] verb for the action: I need to pass two parameters to the Delete action but after applying @Html.HttpMethodOverride(Http.Delete) on the action link it searches for an URL with just one parmaeter: id.

Here is my code: action link

 @Html.HttpMethodOverride(HttpVerbs.Delete)
  @Html.ActionLink(
                "Delete", 
                "Delete", 
                new {id=notification.Id, typeId=notification.TypeId}, 
                new {onclick="confirmDeleteAction()"})

function confirmDeleteAction() {       
    return confirm('Are you sure you want to delete the notification ?');        
}

Delete action:

   [HttpDelete]
    public ActionResult Delete(int id, int typeId)
    {
        Service.DeleteNotification(id, typeId);

        NewIndexViewModel model = Service.GetNewIndexViewModel();
        return View("Index", model);
    }

Answer 1

Try this

 @Html.ActionLink(
            "Delete", 
            "Delete", 
            new {id=notification.Id, typeId=notification.TypeId}, 
            new {onclick="return confirmDeleteAction();"})

Answer 2

You need to cancel the default behaviour of the browser when the user clicks cancel. You can do this by returning the result of confirmDeleteAction() to your <a> tag:

@Html.ActionLink(
                "Delete", 
                "Delete", 
                new {id=notification.Id, typeId=notification.TypeId}, 
                new {onclick="return confirmDeleteAction()"})

For clarity, I added the return keyword to your onclick handler which will return the result of confirmDeleteAction() to the browser -

true = perform the default behaviour of the link

false = do nothing

Answer 3

You can do this type by also.

@Html.ActionLink(
                "Delete", 
                "Delete", 
                new {id=notification.Id, typeId=notification.TypeId}, 
                new {onclick="confirmDeleteAction(" + notification.Id + ")" })


function OnDeleteClick(id) {
                    var ActionID = id;
                    var flag = confirm('Are you sure you want to delete this record?');
                    if (flag) {
                return true;
                }
        else{
        return false;
        }