Refresh jQuery DataTable after delete record without page reload in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi

I want to Delete Record & then display message using NotifyJs & refresh Datatable in MVC c#

<div class="modal fade" id="DeleteModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h4 class="modal-title">Delete Record</h4>
            </div>
            <div class="modal-body">
                <h5> Are you sure you want to Delete this Record ? </h5>
            </div>
            <div class="modal-footer">
                @*<a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                <a href="#" class="btn btn-success" onclick="Delete()">Confirm</a>*@
 
                <button data-dismiss="modal" type="button" class="btn btn-default">Cancel</button>
                <button id="btnConfirmDelete" type="button" class="btn btn-primary">Delete</button> 
            </div>
        </div>
    </div>
</div>

 

$('body').on('click', '[id*=btnDelete]', function () {
        var data = $(this).parents('tr').find('td');
        var Id = data.eq(0).html();
        $("#hiddenId").val(Id);
    });
    $('#btnConfirmDelete').click(function () {
        var Id = $("#hiddenId").val().replace(/\r?\n|\r/g, "").trim();
        $.ajax({
            url: "/Location/Delete",
            data: { Id: Id },
            type: "POST",
            dataType: "json",
            success: function (result) {
                 
                $('#DeleteModal').modal('hide');
                clearTextBox();
                $.notify(result.message, {
                    globalposition: "top center",
                    className: "success"
                })
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    });

 

[HttpPost]
public ActionResult Delete(string Id)
{
    try
    {
        dbLocation.Delete(Id);
    }
    catch (Exception ex)
    {
        ExceptionLogging.SendExcepToDB(ex);
    }
    return RedirectToAction("Index");
}

 

Posted one month ago Modified on one month ago

Hi ramco1917,

Check this example. Now please take its reference and correct your code.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        using (CustomerEntities entities = new CustomerEntities())
        {
            return View(entities.Customers.ToList());
        }
    }

    public JsonResult Add(Customer model)
    {
        using (CustomerEntities entities = new CustomerEntities())
        {
            if (ModelState.IsValid)
            {
                entities.Customers.Add(model);
                entities.SaveChanges();
                return Json(new { success = true, message = "Successfully Saved", data = model });
            }
            else
            {
                var query = from state in ModelState.Values
                            from error in state.Errors
                            select error.ErrorMessage;
                var errors = query.ToArray();
            }
            return Json(model);
        }
    }

    public JsonResult Delete(int Id)
    {
        using (CustomerEntities entities = new CustomerEntities())
        {
            Customer customer = entities.Customers.Where(x => x.CustomerId == Id).FirstOrDefault();
            entities.Customers.Remove(customer);
            entities.SaveChanges();
            return Json(new { success = true, message = "Successfully Deleted", data = entities.Customers.ToList() });
        }
    }
}

View

@model IEnumerable<Customer>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>    
    <script type="text/javascript" src="~/js/notify.js"></script>
    <link rel="stylesheet" href="~/css/notify.css" />
    <script type="text/javascript">
        $(function () {
            $("#tblCustomers").DataTable({
                order: [],
                columnDefs: [{
                    orderable: false,
                    targets: [3]
                }]
            });
        });

            $(document).on('click', '[id*=btnEdit]', function () {
                var data = $(this).closest('tr').find('td');
                var id = data.eq(0).html();
                var name = data.eq(1).html();
                var country = data.eq(2).html();
                $('#hfId').val(id);
                $('#txtName').val(name);
                $('#txtCountry').val(country);
                $('#myModal').modal('show');
            });

            $(document).on('click', '[id*=btnAdd]', function () {
                $('#hfId').val('');
                $('#txtName').val('');
                $('#txtCountry').val('');
            });

            $(document).on('click', '[id*=btnDelete]', function () {
                $('#hiddenId').val($(this).closest('tr').find('td').eq(0).html());
                rowToDelete = $(this).closest('tr');
            });
            var rowToDelete;
            $(document).on('click', '[id*=btnConfirmDelete]', function () {
                var Id = $("#hiddenId").val().replace(/\r?\n|\r/g, "").trim();
                $.ajax({
                    url: "/Home/Delete",
                    data: { Id: Id },
                    type: "POST",
                    dataType: "json",
                    success: function (result) {
                        if (result.success) {
                            $('#DeleteModal').modal('hide');
                            $.notify(result.message, {
                                type: 'success',
                                icon: 'check',
                                align: "center",
                                verticalAlign: "top",
                                animation: true,
                                animationType: "drop",
                                close: true
                            });
                            var table = $('#tblCustomers').DataTable();
                            table.row(rowToDelete).remove().draw();
                            rowToDelete = '';
                        }
                    },
                    error: function (errormessage) {
                        alert(errormessage.responseText);
                    }
                });
            });

        function Add() {
            var table = $("#tblCustomers").DataTable();
            var customer = {
                Name: $('#txtName').val(),
                Country: $('#txtCountry').val(),
            };
            $.ajax({
                url: "/Home/Add",
                data: JSON.stringify(customer),
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $('#myModal').modal('hide');
                    $.notify(data.message, {
                        type: 'success',
                        icon: 'check',
                        align: "center",
                        verticalAlign: "top",
                        animation: true,
                        animationType: "drop",
                        close: true
                    });
                    table.row.add([
                        data.data.CustomerId,
                        data.data.Name,
                        data.data.Country,
                        "<a class='btn btn-primary btn-sm' id='btnEdit'><i class='fa fa-pencil'></i> Edit</a>" +
                        "<a class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'" +
                        "   onclick=\"return confirm('Do you want to delete this record?')\"><i class='fa fa-trash'></i> Delete</a>"]).draw()
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);
                }
            });
        }
    </script>
</head>
<body class="container">
    <div class="table-title">
        <div class="row">
            <div class="col-sm-6 text-right">
                <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                    <i class="fa fa-plus"></i> Add New
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <table class="table" id="tblCustomers">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Country</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model)
                            {
                                <tr>
                                    <td>@Html.DisplayFor(modelItem => item.CustomerId)</td>
                                    <td>@Html.DisplayFor(modelItem => item.Name)</td>
                                    <td>@Html.DisplayFor(modelItem => item.Country)</td>
                                    <td>
                                        <a class='btn btn-primary btn-sm' id='btnEdit'><i class='fa fa-pencil'></i> Edit</a>
                                        @*<a class='btn btn-danger btn-sm' id='btnDelete' style='margin-left:5px'
                                            onclick="return confirm('Do you want to delete this record?')"><i class='fa fa-trash'></i>Delete</a>*@
                                        <a id="btnDelete" class="btn btn-danger btn-sm" data-target="#DeleteModal" data-toggle="modal"
                                           style='margin-left:5px'><i class='fa fa-trash'></i>Delete</a>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="myModal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Customer Details Form</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <input type="hidden" id="hfId" name="CustomerId" />
                        <label>Name:</label>
                        <input type="text" id="txtName" name="Name" value="" class="form-control" />
                    </div>
                    <div class="form-group row">
                        <label>Country:</label>
                        <input type="text" id="txtCountry" name="Country" value="" class="form-control" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="Add()">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div id="DeleteModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Record</h4>
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="hiddenId" value="" />
                    <h5> Are you sure you want to Delete this Record ? </h5>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" type="button" class="btn btn-default">Cancel</button>
                    <button id="btnConfirmDelete" type="button" class="btn btn-primary">Delete</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot