Question

When I delete an item from the DB using jQuery.ajax with POST method, I get this error:

GET Http://localhost:54010/Admin/Category/Delete?id=77 404 Not Found

Action in CategoryController:

[HttpPost]
public ActionResult Delete(int id) {
  try {
    db.CategoryRepository.Delete(id);
    db.Save();
    return Json(new {Result = "OK"});
  } catch (Exception ex) {
    return Json(new { Result = "ERROR", Message = ex.Message });
  }
}

View:

<a id="delete-category" class="btn btn-small" href="#">
  <i class="icon-remove"></i>
  @Resource.delete
</a>

JavaScript:

$(function () {
  $('#delete-category').click(function (event) {
    event.preventDefault();
    $.ajax({
      method: 'POST',
      url: '@Url.Action("Delete","Category")',
      dataType: 'json',
      data: { id: '@Model.CategoryModel.Id' },
      success: function (data, textStatus, jqXHR) {
        console.log("success");
      },
      error: function () {
        alert('error');
      }
    });
  });
});

Why does the click event not generate POST?

Answer 1

You need to tell the ajax() method to make a post request by setting the type parameter:

$.ajax({
    // method: 'POST', <-- remove this
    type: 'POST', // <-- add this
    url: '@Url.Action("Delete","Category")',
    dataType: 'json',
    data: { id: '@Model.CategoryModel.Id' },
    success: function (data, textStatus, jqXHR) {
        console.log("success");
    },
    error: function () {
        alert('error');
    }
});