I'm encountering a slight issue with my code. I am attempting to delete a row from the database without using DataTables in ASP.NET MVC, but it seems to be not working as expected. I have displayed all items from the database on a page within div elements. Here is a snippet of how it looks:
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 })'" />
Using the default button requires going to the Delete View and pressing Delete again, which I want to avoid. That's why I chose to implement Bootbox with Ajax
Therefore, I removed the Delete button and added this instead:
<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 here is the script that I am 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 element of that item until the page is refreshed. It does not remove it from the database. Is there any way to fix this?
If more photos are needed, I am happy to provide them.