ajax delete function doesn't call the related action in the controller - ajax

Question

I'm implementing asp.net core 3.1 project. In my project I have an Index view that shows a table of records and near each record there is a 'Delete' button. After user clicks the 'Delete' button I call jQueryAjaxDelete function (which is in site.js) and send Delete action and its controller container to it. Now my problem is when I click the 'Delete' button a confirmation message shows to me but after clicking the button to delete the record, it doesn't call 'Delete' action in Gate controller so it doesn't delete the record. Here is what I have tried:
Index view:
<div id="tablecontainer" class="my-5 col-sm-12 p-4">
<table id="myDummyTable" class="table">
<thead>
<tr id="headerrow">
<th>
Desc
</th>
<th>
Operation
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
<a onclick="jQueryAjaxDelete('#Url.Action("Delete","Gates",new {id=item.Id},Context.Request.Scheme)','Delete')" class="btn btn-info text-white"><i class="fas fa-pencil-alt"></i> delete</a>
</td>
</tr>
}
</tbody>
</table>
</div>
Here is Delete action in Gate controller:
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Delete(int id)
{
Console.WriteLine("Deleted id:" + id);
var gate = await _context.Gate.FindAsync(id);
gate.IsDeleted = true;
_context.Gate.Update(gate);
await _context.SaveChangesAsync();
//return RedirectToAction(nameof(Index));
return Json(new { html = Helper.RenderRazorViewToString(this, "_ViewAll", _context.Gate.ToList()) });
}
Here is jQueryAjaxDelete in site.js:
jQueryAjaxDelete = form => {
if (confirm('Are you sure to delete this record?')) {
try {
$.ajax({
type: 'POST',
url: form.action,
data: new FormData(form),
contentType: false,
processData: false,
success: function (res) {
$('#view-all').html(res.html);
},
error: function (err) {
console.log('confirm deleteAjax error');
console.log(err);
}
})
} catch (ex) {
console.log(ex)
}
}
I appreciate if anyone suggest to me a solution.

Answer 1

You need to add RequestVerificationToken in the frontend, because you have added [ValidateAntiForgeryToken] in the backend.
The form itself is a url. You can use it directly.
You have pass the parameter with querystring. So you can remove the FormData.
Here is the code can call the action.
<!--in .cshtml-->
#Html.AntiForgeryToken()
#section Scripts{
<script>
var jQueryAjaxDelete = form => {
if (confirm('Are you sure to delete this record?')) {
console.log(form)
try {
$.ajax({
type: 'POST',
url: form,
headers: {
RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
},
success: function (res) {
$('#view-all').html(res.html);
},
error: function (err) {
console.log('confirm deleteAjax error');
console.log(err);
}
})
} catch (ex) {
console.log(ex)
}
}
}
</script>
}
If <a> reloads or redirects when you click, you could pass an event into jQueryAjaxDelete and use this method.
event.preventDefault()