How to delete record from database in ASP.NET MVC without reloading the page?

Question

How can I delete data from my database in ASP.NET MVC without reloading the page ?

I tried all the methods but couldn't find a solution.

This is my ajax code :

(".remove-hasan").on("click", function () {

    var id = $(this).attr("data-id");

    $.ajax({
        url: "/Main/DeleteFavourite" + id,
        type: "POST",
        data: { id: id, },
        success: function (response) {
            if (response == "ok") {

                $(".modal-action-messages").empty();
                $(".modal-action-messages").append("Ürün Başarıyla Favorilerinizden Çıkarılmıştır.");

                $this.find(".remove").removeClass(".remove");
                $this.find(".remove").addClass(".remove");
            }
        }
    });
});

Controller :

[HttpPost]
public IActionResult DeleteFavourite(int id)
{
    var product = _uow.Favourite.GetAll()
                                .Where(p => p.ProductId == id)
                                .FirstOrDefault();
    _uow.Favourite.Delete(product);
        
    return Json("ok");
}

can you please add some examples what you tried. You can try jquery/ajax — donstack
– donstack, Commented Sep 6, 2022 at 7:24
url: "/Main/DeleteFavourite" + id, this part is wrong. Just put url: "/Main/DeleteFavourite". Remove the Id — Yat Fei Leong
– Yat Fei Leong, Commented Sep 6, 2022 at 7:37
You haven't shown us anything that would cause the page to be reloaded! — phuzi
– phuzi, Commented Sep 6, 2022 at 8:20

donstack · Accepted Answer · 2022-09-06 10:03:48Z

1

So, your major problem is how to remove the entry from frontend i.e. HTML page.

Once you get the success from ajax call, you need to find that row from HTML table and simply delete it.

Assuming, you code is already reaching inside

response == "ok"

It's always suggested to use Id for each row, which I think you already have.

success: function (response) {
            if (response == "ok") {

            $('[data-id='+id+']').remove();
            }
}

Here data-id is used inside jQuery selector to uniquely find that row.

answered Sep 6, 2022 at 10:03

donstack

2,7253 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

donstack Over a year ago

@hasan dont forget to accept the answer as it help other people having similar question/issue

Abdul Haseeb · Accepted Answer · 2022-09-06 10:35:57Z

0

As I see your HTML file. You can do it in the following way.

Steps

In the success function. find the closest tr and then call jQuery function remove()

$(".remove-hasan").on("click", function () {
    var delButton = $(this);
    var id = $(this).attr("data-id");

    $.ajax({
        url: "/Main/DeleteFavourite" + id,
        type: "POST",
        data: { id: id, },
        success: function (response) {
            if (response == "ok") {
            //Your code        
            ...
            delButton.closest("tr").remove();
        }
    });
});

answered Sep 6, 2022 at 10:35

Abdul Haseeb

5721 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to delete record from database in ASP.NET MVC without reloading the page?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related