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:

Default Edit/Delete buttons

<input type="button" value="Edit"  onclick="location.href='@Url.Action("Edit", "Products", new { id = item.Id })'" />
<input type="button" value="Delete"  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" >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..

CodePudding user response：

you should send as post and your post action return json.

   [HttpPost, ActionName("Delete")]
   [ValidateAntiForgeryToken]
   public JsonResult DeleteConfirmed(int id)
   {
       Product product = db.Products.Find(id);
       db.Products.Remove(product);
       db.SaveChanges();
       return Json("");
   }

then, the method must be post.

$.ajax({
      url: "/Products/Delete/"   button.attr("data-product-id"),
      method: "POST",
      success: function () {
          $(button).parent().parent().remove();
      },
      error: function (err) {
          console.log(err);
      }
 });

CodePudding user response：

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

Previous:

// 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