Delete each row by clicking delete button using Jquery-Ajax in ASP.NET MVC 5

Question

My code delete the whole table due to usage of each function. I want to delete multiple rows by clicking each delete image link in cell which is mentioned in my view.

If I do not use each function it only delete the first row on which I have clicked and after that if I want to delete another row I have to refresh the page.

my controller

[HttpPost]

    public ActionResult Delete(int? id)
    {
        using (var db = new DAL.InventoryDBEntities())
        {

            DAL.DetailsTable personalDetail = db.DetailsTable.Find(id);
            db.DetailsTable.Remove(personalDetail);
            db.SaveChanges();
            return Json(true ,JsonRequestBehavior.AllowGet);    
        }

    }

my script

function Delete() {


    $("a.deleteimage").each(function () {
        var Id = $(this).data("model-id");
        var url = "/Home/Delete/" + Id;
        $.ajax({
            url: url,
            type: "POST",

            success: function () {

                $("#tblDetails").load(window.location + " #tblDetails");
            },

            error: function () {
                alert("Fails");
            }

        });

    });

};

my razor view

 <table id="tblDetails" class=" table-bordered table-striped table-condensed">
    <thead>
        <tr>
            <th>Name</th>
            <th>City</th>
            <th>Country</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>@item.Name</td>
            <td>@item.City</td>
            <td>@item.Country</td>
            <td>
            <a id="editimage" href="javascript:;">
                     <img id="image" src="/UserImages/edit.png" />
            </a><a class="deleteimage" data-model-id="@item.Id">
                     <img src="/UserImages/delete.png" />
            </a>
            </td>

        </tr>
        }
    </tbody>

</table>

Ibrahim Inam · Accepted Answer · 2018-10-03 11:35:41Z

What I have concluded from your words you want to delete each row without refreshing your page, its pretty simple it does not require each function and I have done it without using it.

Your Controller looks fine and you do not have any need to change it. What I suggest you to update your Script and your Razor View.

First of all you have to update your script If you have your delete function inside of DOM place out of it whenever you call a function separately by jquery event method it is considered to be good practice to place your whole function outside of DOM and do the following changes in your code.

Updated Script:

function Delete(obj) {
var ele = $(obj);
var Id = ele.data("model-id");
var url = "/Home/Delete/" + Id;
$.ajax({
    url: url,
    type: "POST",

    success: function () {

        ele.closest("tr").remove();
       },

    error: function () {
        alert("Fails");
    }

});

};

Update this Button in your Razor View:

<a class="delete" data-model-id="@item.Id" onclick="Delete(this)" >.........</a>

I hope this will resolve your problem

Best regards;

Ibrahim Inam

Collectives™ on Stack Overflow

Delete each row by clicking delete button using Jquery-Ajax in ASP.NET MVC 5

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