CODEWITHSUNDEEP
jqueryasp.net-mvcdatatables
J.C
J.C

Reputation: 752

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

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. 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 } };
    }

Upvotes: 0

Views: 1396

Answers (1)

Ashiquzzaman
Ashiquzzaman

Reputation: 5284

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.

Upvotes: 2

Related Questions