Delete btn in MVC.net

Question

I might need an extra set of eyes but my delete btn is not working it does return a message but after clicking yes or ok it doesn't remove the data i wanted to delete basically nothing happens, I think I have an issue with the inventory.Id part. thank you, and i know this is not a good question for other users but i appreciate the help.

       <tbody>
                      @foreach (var inventory in Model)
        {
        <tr>
            <td>@Html.ActionLink(inventory.PartNumber, "Edit", "Inventory", new 
        { id = inventory.Id }, null)</td>
            <td>@inventory.PinNumber</td>
            <td>@inventory.PartQuantity </td>
            <td>@inventory.PartPrice </td>
            <td>@inventory.PartDescrption</td>
            <td> <button data-inventory-id="@inventory.Id" class="btn-link js-delete">Delete</button> </td>


        </tr>
        }

    </tbody>
</table>

@section scripts
{
    <script>
        $(document).ready(function ()
        {
            $("#inventories").DataTable();
            $("#inventories .js-delete").on("click", function () {
                var button = $(this);
                if (confirm("Are you sure you want to delete this Part Number?")) {
                    $.ajax({
                        url: "/inventory/" + button.attr("data-inventory-id"),
                        method: "DELETE",
                        success: function () {
                            button.parents("tr").remove();
                        }
                    });
                }
            });

        });
    </script>
}

this is my Controller for the Delete Action:

 [HttpDelete]
        public void  DeleteInventory(int id)
        {
            var inventoryInDb = _context.Inventory.SingleOrDefault(c => c.Id == id);



            _context.Inventory.Remove(inventoryInDb);
            _context.SaveChanges();


        }

I don't have an API in the Tutorial i am following He has an API but I didn't create one. I am trying to get around that. Thank you.

Answer 1

How about using POST instead of DELETE as your ajax method? Or simply using the $.post method.

https://www.w3schools.com/jquery/ajax_post.asp

Answer 2

Most likely you did not create a DELETE method in your back-end API. To find out for sure, open Chrome's developer tools (making sure you're on the console tab) and then click your button. You will see an error message that says "Method DELETE is not found" or something similar.

If it says "method is not allowed" then that has to do with permissions (the user clicking the button does not have permission to access that API).

Answer 3

In controller:
public ActionResult Delete(int? id)
                {
                    if (id == null)
                    {
                        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                    }
                    Inventory inventory = _context.Inventory.Find(id);
                    if (inventory == null)
                    {
                        return HttpNotFound();
                    }
                    return View(inventory);
                }


in index add delete btn, this is an ajax call to the delete btn its used with dataTables to render data faster..

    {
"render": function (data, type, row, meta) {
               return '<a class="btn btn-danger" 
                href ="@Url.Action("Delete", "Inventory")/' + row.Id + '">Delete</a>'; 
 }

create a Delete view:

 @model InventoryTracker.Models.Inventory //this has to be re-named to your naming 
      convention.
     @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
        <div class="form-actions no-color">
            <input type="submit" value="Delete" class="btn btn-primary" />
            &nbsp;&nbsp;

            @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-primary" })

        </div>
        }
                        }