My Delete button not working with a function c#

Question

I am doing this project in mvc .net and i cant get the delete button to work for some reason. Basically clicking on it does nothing. I want to delete an item from the database. Can someone help me fix this?

the complete table that i was asked to add:

<body style="background-color:ghostwhite; ">
<table id="tableid" style="float: left; margin-top: 5%; margin-left: 5%; border:1px solid black; width: 720px; height: auto; background-color: white">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Quantity)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            @if (User.IsInRole("Pharmacist"))
            {
                <th>
                    Order
                </th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Quantity)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>

                <td>
                    @if (User.IsInRole("Administrator"))
                    {
                        @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-info" })
                        <button data-id="@item.Id" class="btn btn-warning js-delete">Delete</button>
                    }
                    @if (User.IsInRole("Pharmacist"))
                    {
                        @Html.BeginForm("Order1", "Medicines")
                        {
                            @item.Id<input type="checkbox" name="selectedNames" value="@item.Id" />
                        }
                    }
                    </td>
            </tr>
        }
    </tbody>
</table>

@if (User.IsInRole("Pharmacist"))
{
    <button class="btn btn-default" value="Order">Generate receipt</button>
}

For one, your ajax is `method: "GET",` when your controller method is a `POST`, second, your controller method is validating an anti-forgery token, which I don't see in your view and you aren't passing it in your ajax. — Ryan Wilson, Sep 15 '22 at 19:54
[when-do-you-use-post-and-when-do-you-use-get](https://stackoverflow.com/questions/46585/when-do-you-use-post-and-when-do-you-use-get) — Ryan Wilson, Sep 15 '22 at 20:10
thanks , i changed but still nothing happens when i click the button @RyanWilson — David, Sep 15 '22 at 21:27

score 1 · Answer 1 · answered Sep 15 '22 at 20:51

1

You should change Method GET To POST in the ajax query like code below :

method: "POST",

Because the action header is "HttpPost" type.

answered Sep 15 '22 at 20:51

Rostam Bamasi

204
1
6

i changed this but still nothing happens when i click the button – David Sep 15 '22 at 21:26

score 1 · Answer 2 · answered Sep 15 '22 at 21:11

1

Here are the some necessary actions you perform.

Controller

[HttpPost]
public ActionResult Delete(int id)
{
    Medicines medicines = db.Medicines.Find(id);
    db.Medicines.Remove(medicines);
    db.SaveChanges();
    return RedirectToAction("CreateNewMedicine");
}

View

@foreach (var item in Model)
{
    <tr>
        <td>
            <button medicine-Id="@item.Id" data-id="@item.Id" class="btn btn-warning js-delete">Delete</button>
        </td>
    </tr>
}

script

$(document).ready(function () {
    var table = $("#tableid").DataTable();
    $("#tableid .js-delete").on("click", function () {
        var button = $(this);
        var _id = $(this).attr("data-id");
        bootbox.confirm("Are you sure?", function (result) {
            if (result) {
                $.ajax({
                    url: "/ControllerName/Delete?id="+_id,
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    datatype : "json",
                    success: function () {
                        table.row(button.parents("tr")).remove().draw();
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }
        });
    }
});

Note: When you decorate your Action Method with the ValidateAntiForgeryToken attribute. you have to supply the __RequestVerficationToken to prevent CSRF attacks.

answered Sep 15 '22 at 21:11

Abdul Haseeb

514
4
13

I tried this copied everything and still nothing happens when i click it for some reason – David Sep 15 '22 at 21:26
Change `$("#tableid .js-delete").on("click", function () {` to `$(document).on("click",".js-delete",function() {` – Abdul Haseeb Sep 16 '22 at 10:47
@David dont just copy and paste, enter your controller name inside `url` attribute of `ajax` and enter **breakpoint** on action method to check whether he hit or not. – Abdul Haseeb Sep 16 '22 at 10:48
@David also inspect the page, and check the log error – Abdul Haseeb Sep 16 '22 at 10:49
Hello, thanks for your reply, i did the fix u told me and i also had changed the url to the controller but unfortunetly it still doesnt work @AbdulHaseeb – David Sep 16 '22 at 17:17
@David inspect the page and check if there are any log errors in browser when you click the button? – Abdul Haseeb Sep 16 '22 at 17:29
i did but its not letting me click the button, nothing happens when i click it @AbdulHaseeb – David Sep 16 '22 at 17:34
@David right click on the page => inspect. click on **console** tab. After that click the button and check whether you have any console log errors or not? – Abdul Haseeb Sep 16 '22 at 17:47
Yes i checked there are no errors @AbdulHaseeb – David Sep 16 '22 at 19:30
@David please add your complete table in your question – Abdul Haseeb Sep 16 '22 at 19:36

My Delete button not working with a function c#

2 Answers2