如何在没有表格的情况下发出帖子请求并且不会出现错误 400

Question

I'm sending a post request without a form in asp.net. I'm getting error 400.

AJAX

function deteleCategorieBtn(id) {
if (confirm("Are you sure you want to delete ?")) {
    $.ajax({
        type: "POST",
        url: 'categories/delete/' + id,
        success: function () {
            var dataTable = $('#kt_datatable').DataTable();
            dataTable.ajax.reload(null, false);    
        },
        error: function (request, error) {
            console.log(request, error);
        }
    })
}

CONTROLLER

// POST: Categories/Delete/5
        [Route("delete/{id?}")]
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Delete(int id)
        {
            var category = await _context.Categories
                   .FirstOrDefaultAsync(m => m.Id == id);
            if(category != null){
                _context.Categories.Remove(category);
                await _context.SaveChangesAsync();
            }
            else
            {
                return Json(new { error = true, messages = "Categorie doesn't exist" }, new Newtonsoft.Json.JsonSerializerSettings());
            }

            return Json(new { success = true, messages = "Registered well" }, new Newtonsoft.Json.JsonSerializerSettings());
        }
    }

• On the console, the url is correct
• I tried changing the type from POST to DELETE in ajax part, and HttpPost to HttpDelete - Didn't work
• I used the very same controller code successfully with a form that looks like that :

<form asp-action="Delete" asp-route-id="@item.Id" onclick="return confirm('Are you sure you want to delete ? ?');">
      <button type="submit" value="Delete" class="btn btn-sm btn-clean btn-icon"></button>
</form>

EDIT : Found this error message :

System.InvalidOperationException: The provider for the source IQueryable doesn't implement IDbAsyncQueryProvider. Only providers that implement IDbAsyncQueryProvider can be used for Entity Framework asynchronous operations.

Answer 1

You need to add an Antiforgery token while doing the ajax post.

Add an antiforgerytoken like below in your page

@Html.AntiForgeryToken()

This will be added in a hidden input field

While doing the ajax post, send the token like below

$.ajax({
        type: "POST",
        url: 'categories/delete/' + id,
        beforeSend: function (xhr) {
            xhr.setRequestHeader('XSRF-TOKEN',
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
    success: function () {
        var dataTable = $('#kt_datatable').DataTable();
        dataTable.ajax.reload(null, false);    
    },
    error: function (request, error) {
        console.log(request, error);
    }
    });