How to include the @Html.AntiForgeryToken() when deleting an object using a Delete link

Question

i have the following ajax.actionlink which calls a Delete action method for deleting an object:-

 @if (!item.IsAlreadyAssigned(item         


        

Answer 1

Modifying the answer by Bronx:

$.ajaxPrefilter(function (options, localOptions, jqXHR) {
    var token, tokenQuery;
    if (options.type.toLowerCase() !== 'get') {
        token = GetAntiForgeryToken();
        if (options.data.indexOf(token.name)===-1) {
            tokenQuery = token.name + '=' + token.value;
            options.data = options.data ? (options.data + '&' + tokenQuery) 
                : tokenQuery;
        }
    }
});

combined with this answer by Jon White

function GetAntiForgeryToken() {
  var tokenField = $("input[type='hidden'][name$='RequestVerificationToken']");
  if (tokenField.length == 0) { return null; 
  } else {
  return {
     name: tokenField[0].name,
     value: tokenField[0].value
  };
}

Edit sorry - realised I am re-inventing the wheel here SO asp-net-mvc-antiforgerytoken-over-ajax/16495855#16495855

Answer 2

You need to use the Html.AntiForgeryToken helper which sets a cookie and emits a hidden field with the same value. When sending the AJAX request you need to add this value to the POST data as well.

So I would use a normal link instead of an Ajax link:

@Html.ActionLink(
    "Delete", 
    "Delete", 
    "LabTest", 
    new { 
        id = item.LabTestID
    }, 
    new { 
        @class = "delete",
        data_confirm = "Are You sure You want to delete (" + item.Description.ToString() + ") ?"
    }
)

and then put the hidden field somewhere in the DOM (for example before the closing body tag):

@Html.AntiForgeryToken()

and finally unobtrusively AJAXify the delete anchor:

$(function () {
    $('.delete').click(function () {
        if (!confirm($(this).data('confirm'))) {
            return false;
        }

        var token = $(':input:hidden[name*="RequestVerificationToken"]');
        var data = { };
        data[token.attr('name')] = token.val();
        $.ajax({
            url: this.href,
            type: 'POST',
            data: data,
            success: function (result) {

            },
            error: function () {

            }
        });

        return false;
    });
});

Now you could decorate your Delete action with the ValidateAntiForgeryToken attribute:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Delete(int id)
{
    ...
}