Delete row in table using ajax in asp.net mvc without postback in jquery datatable

Question

I want to delete a row in my table without post-back. I am using jquery datatables. I have a garbage icon where I want to ask the user to confirm delete. There are some scenarios where the delete is not possible so after the user confirms I want to show a message that tells the user that the delete was not possible or that it succeeded.

Here is a visual representation of my table.

Here is my datatable code.

    <script>
        $(document).ready(function () {
            $('#proveedorTable').DataTable({
                "ajax": {
                    "url": "/fichaproveedor/loaddata",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "proveedor_id", "autoWidth": true },   /* index = 0 */
                    { "data": "nombre", "autoWidth": true },      /* index = 1 */
                    { "data": "direccion", "autoWidth": true },  /* index = 2 */
                    { "data": "codigo_postal", "autoWidth": true },  /* index = 3 */
                    { "data": "cuidad", "autoWidth": true },  /* index = 4 */
                    { "data": "pais", "autoWidth": true },  /* index = 5 */
                    { "data": "pagina_internet", "autoWidth": true },  /* index = 6 */
                    {
                        "data": "proveedor_id", "width": "50px", "render": function (data) {
                            return '<a class="btn" href="/fichaproveedor/AnadirEditar/' + data + '"><i class="material-icons" title="Detalles">edit</i></a>';   /* index = 7 */
                        }
                    },
                    {
                        "data": "proveedor_id", "width": "50px", "render": function (data) {
                            return '<a class="popup" href="/fichaproveedor/Eliminar/' + data + '"><i class="material-icons" title="Eliminar">delete</i></a>';   /* index = 8 */
                        }
                    },
                    { "defaultContent": "", "autoWidth": true }, 
                ],
                'columnDefs': [{
                    'targets': [7,8,9], /* column index */
                    'orderable': false, /* true or false */
                }]
            })
</script>

Here is my asp.net mvc code.

    [HttpPost]
    public ActionResult Eliminar(int id)
    {
        proveedorContext proveedorContext = new proveedorContext();

        var proveedorFound = proveedorContext.GetAllProveedor().Where(a => a.proveedor_id == id).FirstOrDefault();
        var proveedorsData = proveedorContext.GetAllProveedor();
        if (proveedorFound != null)
        {
            proveedorContext.deleteProveedorFromDB(proveedorFound);
            return Json(new { succes = true }, JsonRequestBehavior.AllowGet);
        }
        return Json( new { succes = false }, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    [ActionName("Eliminar")]
    public ActionResult EliminarFromDB(int id)
    {
        proveedorContext proveedorContext = new proveedorContext();

        var proveedorFound = proveedorContext.GetAllProveedor().Where(a => a.proveedor_id == id).FirstOrDefault();
        var proveedorsData = proveedorContext.GetAllProveedor();
        if (proveedorFound != null)
        {

            proveedorContext.deleteProveedorFromDB(proveedorFound);
            return Json( new { succes = true }, JsonRequestBehavior.AllowGet );
        }
        return new JsonResult { Data = new { succes = false } };
    }

Ashiquzzaman · Accepted Answer · 2020-03-30 01:56:56Z

2

1.Change your delete button like--

{
  "data": "proveedor_id", "width": "50px", "render": function (data) {
 return "<a href='#' class='popup' onclick=Delete('" + data + "'); title='Eliminar'><i class='material-icons'></i>delete</a>";
}


OR

{
  "width": "50px", "render": function (data, type, row) {
 return "<a href='#' class='popup' onclick=Delete('" + row.proveedor_id + "'); title='Eliminar'><i class='material-icons'></i>delete</a>";
}

2.Create Delete function like--

    function Delete(id) {
        var url ="/fichaproveedor/Eliminar/";
        $.post(url, { id: id }, function (data) {
            if (data) {
                oTable = $('#proveedorTable').DataTable();
                oTable.draw();
            }
            else {
                alert("Something Went Wrong!");
            }
        });
    }

    //If you need confirm box use this
    function DeleteData(id) {
      var box = confirm("Are you sure you want to delete ...?");
      if (box == true) {
         Delete(id);
      } else {
        //Do somthing
      }
    }

It's work for me. Hopefully it's working for you.

edited Mar 30, 2020 at 1:56

answered Mar 30, 2020 at 0:33

Ashiquzzaman

5,3144 gold badges30 silver badges40 bronze badges

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

11 Comments

J.C Over a year ago

Thank you for your help I have tried your example however the function delete does not fireup.

Ashiquzzaman Over a year ago

@JuniorCortenbach sorry for my mistake. I forger you set "data": "proveedor_id". Can you try my update answer.

Ashiquzzaman Over a year ago

@JuniorCortenbach Can you use DeleteData rather than Delete. Actually I use it. also set a debugger. Maybe the $.post method. and you have same action with HttpPost in your controller` Eliminar(int id)` and [ActionName("Eliminar")] EliminarFromDB(int id). I just copy code form my working project.

Ashiquzzaman Over a year ago

@the for refresh you need to redraw your datatable you can achieve using datatable.draw() method..That's belong to ` oTable = $('#proveedorTable').DataTable(); oTable.draw();`. More Help: stackoverflow.com/questions/60583033/…

Ashiquzzaman Over a year ago

@JuniorCortenbach I think the code working fine for refresh. can you please check if (data) { oTable = $('#proveedorTable').DataTable(); oTable.draw(); }. Maybe the if condition not working. change it (if (data) ) as your return result.

|

Collectives™ on Stack Overflow

Delete row in table using ajax in asp.net mvc without postback in jquery datatable

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related