Delete from Database using Ajax ASP.NET MVC without DataTables

Question

I have a small problem in my code.. I'm trying to delete a row from database, but without using DataTables (in asp.net mvc) and it doesnt work. I've displayed every item from the database on a page in div's.. It looks like this

Index:
index

Default Edit/Delete buttons

<input type="button" value="Edit" class="btn btn-warning btn-sm mt-auto" onclick="location.href='@Url.Action("Edit", "Products", new { id = item.Id })'" />
<input type="button" value="Delete" class="btn btn-danger btn-sm mt-auto" onclick="location.href='@Url.Action("Delete", "Products", new { id = item.Id })'" />

with default button I would have to go to the Delete View and press Delete again,and I dont want that.. thats why I'm using Bootbox with Ajax

So I deleted that Delete button and added this:

<button data-product-id="@item.Id" class="btn btn-danger btn-sm mt-auto js-delete">Delete</button>

This is my controller

// GET: Products/Delete/5
    public ActionResult Delete(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Product product = db.Products.Find(id);
        if (product == null)
        {
            return HttpNotFound();
        }
        return View(product);
    }

    // POST: Products/Delete/5
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public ActionResult DeleteConfirmed(int id)
    {
        Product product = db.Products.Find(id);
        db.Products.Remove(product);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

and this is my script that I'm using

        $(document).ready(function () {
        $(".products-panel .js-delete").on("click", function () {
            var button = $(this);
            bootbox.confirm("Do you want to delete this product", function (result) {
                if (result) {
                    $.ajax({
                        url: "/Products/Delete/" + button.attr("data-product-id"),
                        method: "GET",
                        success: function () {
                            $(button).parent().parent().remove();
                        },
                        error: function (err) {
                            console.log(err);
                        }
                    });
                }
            });
        });
    });

Currently it only removes the div of that item until you refresh the page.. (it doesnt remove it from the database).. Is there any way that I can fix this

If someone needs more photo's I can provide them..

Put a breakpoint in your code and check it. Is it even being called? — Poul Bak
– Poul Bak, Commented Aug 6, 2022 at 16:13

Klopeh · Accepted Answer · 2022-08-06 17:36:28Z

I fixed the problem, I just had to remove the GET Delete action from the Controller and Change the name on the Post method from DeleteConfirmed to Delete

// GET: Products/Delete/5
public ActionResult Delete(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Product product = db.Products.Find(id);
    if (product == null)
    {
        return HttpNotFound();
    }
    return View(product);
}

// POST: Products/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
    Product product = db.Products.Find(id);
    db.Products.Remove(product);
    db.SaveChanges();
    return RedirectToAction("Index");
}

Working:

    // POST: Products/Delete/5
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public ActionResult Delete(int id)
    {
        Product product = db.Products.Find(id);
        db.Products.Remove(product);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

Thanks for the people that tried to help

Collectives™ on Stack Overflow

Delete from Database using Ajax ASP.NET MVC without DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related