How can i delete a row from table without refreshing the Page?

Question

How can i delete a row from table without refreshing the Page? I deleted the delete view from the views but it is showing me "The Resources Cannot Be Found" I am not so perfect in MVC if someone could help me with this,that will be so thankful.

Here is my Controller

[Here is my Index view

<table id="customers">
    <tr>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Salary)
        </th>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th style="text-align:center">Action</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="centerAlign">
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Salary)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>

public ActionResult Delete(int id = 0)
        {
            New_Table new_table = db.New_Table.Find(id);
            if (new_table == null)
            {
                return HttpNotFound();
            }
            return View(new_table);
        }

        //
         //POST: /Default1/Delete/5

        [HttpPost]
        public ActionResult Delete(int id)
        {
            New_Table new_table = db.New_Table.FirstOrDefault(s => s.Id.Equals(id));
            if (new_table != null)
            {
                db.DeleteObject(new_table);
                db.SaveChanges();
            }
            return View("Index");
        }

]2

You will have to use JavaScript and Ajax. Try working with Ajax.ActionLink in your Razor View. — Tobias
– Tobias, Commented Jun 11, 2018 at 6:24

Sombir Kumar · Accepted Answer · 2018-06-11 06:39:23Z

1

Remove Action Link:- @Html.ActionLink("Edit", "Edit", new { id = item.Id })
Put this item.id in hidden field
Get the id from hidden field in a javascript variable.
Call your delete action method via ajax[POST] call, pass id in ajax call.

Hope it will help!

answered Jun 11, 2018 at 6:39

Sombir Kumar

1,8913 gold badges17 silver badges30 bronze badges

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

1 Comment

Vishnu Sharma Over a year ago

This code didn't work, what i am missing, could you please elaborate.

Sahil Sharma · Accepted Answer · 2018-06-11 10:09:55Z

0

Simply use JavaScript and Ajax for it. Try this approach in your DeleteView:

<script>
function DeleteId(id)
{
  $.ajax({
     dataType: "json",
     url: '@Url.Action("ActionName","ControllerName")',
     data: {id: id},
     success: function(result){
                //todo
            }
       });
    }
</script>

<table id="customers">
    <tr>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Salary)
        </th>
        <th style="text-align:center">
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th style="text-align:center">Action</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="centerAlign">
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Salary)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>

            <!-- Code Removed for simplicity -->
            <a onClick="DeleteId('@item.Id');"> Delete <a/>
            </td>
        </tr>

answered Jun 11, 2018 at 10:09

Sahil Sharma

1,8992 gold badges18 silver badges39 bronze badges

1 Comment

Vishnu Sharma Over a year ago

Thanks for the answer, but it didn't work i applied this code.

Collectives™ on Stack Overflow

How can i delete a row from table without refreshing the Page?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related