ASP.NET Core How to dynamically remove list element? - ajax

Question

I want a user to be able to edit the order and delete some items. To do this, for each item I added a delete button (you can see it in the code below).
Partial view Views/Shared/EditorTemplates/Item.cshtml (Attribute data-id is hardcoded, because I have no idea how to pass the current OrderItem Id):
#model TimeTracker.Models.OrderItem
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Product" class="control-label"></label>
<input asp-for="Product" class="form-control" />
<span asp-validation-for="Product" class="text-danger"></span>
<input class="btn btn-default" type="button" id="btnDel" data-id="1" value="Remove" />
</div>
In ajax call comes the error in the console, which refers to the controller method. Here I am assuming I filled in the parameter data in ajax call incorrectly. I really don't know how to fill it in correctly in my case.
Failed to load resource: the server responded with a status of 405 ()
:5001/Orders/RemoveItem:1
Ajax call:
$("#btnDel").on('click', function () {
$.ajax({
async: true,
data: { order: $('#form').serialize(), orderItemId: $('#btnDel').data('id') },
type: "DELETE",
url: '/TaskTypes/RemoveItem',
success: function (partialView) {
console.log("partialView: " + partialView);
$('#itemsContainer').html(partialView);
}
});
});
Controller method:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> RemoveItem([Bind("OrderItems")] Order order, int orderItemId)
{
order.OrderItems.RemoveAll(c => c.Id == orderItemId);
return PartialView("Items", order);
}

Answer 1

When you use ValidateAntiForgeryToken You have to pass RequestVerificationToken in your ajax header to validate your request.
Please visit https://learn.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-3.1 for more details about prevent cross site request.