Question

I would like to show an alert when user click the delete button as follows:

@Html.ActionLink("Delete", "Delete", new { id = Model.ID }, new { @data_role = "button" })

I’m not sure how I can get the id and event of onclick from this button.

Answer 1

You could give an id to this anchor:

@Html.ActionLink(
    "Delete", 
    "Delete", 
    new { id = Model.ID }, 
    new { id = "delete", data_role = "button", data_id = Model.ID }
)

and then use jQuery to subscribe to the click event:

$(function() {
    $('#delete').click(function() {
        var id = $(this).data('id');
        return confirm('Are you sure you want to delete record with id: ' + id);
    });
});

and if you are not using jQuery but plain javascript:

window.onload = function() {
    document.getElementById('delete').onclick = function() {
        var id = this.getAttribute('data-id');
        return confirm('Are you sure you want to delete record with id: ' + id);
    };
};

The .confirm() javascript function displays the messages and returns true or false based on whether the user clicked on the OK or Cancel button.