Refresh jQuery DataTable after row update in ASP.Net MVC

alya14

SOLVED CLOSED ACTIVE ANSWERED
User: alya14
Posted: on Apr 10, 2020 07:51 AM
Forum: ASP.Net MVC
Answer: 1
Views: 20120

How to update datatable rows from modal

everything is working fine. I have just problem datatable not refresh after modal close.

I update the current datatable row via modal and values is coming and going right, but when click the update modal button datatables draw or sort problem.

how can I update datatables re draw after modal closed

                <table id="tblmainMenu" class="table table-responsive-sm table-condensed  table-bordered">
                    <thead>
                        <tr>                           
                            <th style='visibility:collapse'>@Html.DisplayNameFor(model => model.CloudMainMenuViewModelClass.ID)</th>
                            <th>@Html.DisplayNameFor(model => model.CloudMainMenuViewModelClass.MAINMENUCODE)</th>
                            <th>@Html.DisplayNameFor(model => model.CloudMainMenuViewModelClass.MAINMENUNAME)</th>
                            <th>@Html.DisplayNameFor(model => model.CloudMainMenuViewModelClass.ICON)</th>
                            <th>Aksiyon</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.CloudMainMenuList)
                        {
                            <tr>
                                <td style='visibility:collapse'>@item.ID</td>
                                <td>@item.MAINMENUCODE</td>
                                <td>@item.MAINMENUNAME</td>
                                <td>@item.ICON</td>
                                <td>                                   
                                    <a class='fa fa-list' id="btnAnaMenuUpdate" onclick="GetMainMenu(@item.MAINMENUCODE)" style='color: #428bca;' data-toggle='tooltip' title='UpdateMenu' href='javascript:;'></a> |
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>

<!-- Menü Update Modal -->                 
<div class="modal fade" id="MainMenuModal" tabindex="-1" role="dialog" aria-labelledby="myModalLable" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" style="margin: 0 auto;" id="ModalTitle">Ana Menü Ekle</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="mConta">
                    <div class="form-group">
                        <div class="col-sm-12">                           
                            <input id="txtID" style="display:none" type="text" placeholder="Main Menu ID" />
                        </div>
                    </div>
 
                    <div class="form-group">
                        <div class="col-sm-12">                           
                            <input id="txtMainMenuCode" class="form-control tooltip-test" title="Main Menu No" type="text"  />
                        </div>
                    </div>
 
                    <div class="form-group">
                        <div class="col-sm-12">                           
                            <input id="txtMainMenuName" class="form-control tooltip-test" type="text" title="Main Menu Adı"  />
 
                        </div>
                    </div>
 
                    <div class="form-group">
                        <div class="col-sm-12">                           
                            <input id="txtIcon" type="text" class="form-control tooltip-test" title="Main Icon"  />
                        </div>
                    </div>
 
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btnClose" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="btnSave">
                    Save <span class="fa fa-floppy-o" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-success" id="btnUpdate" onclick="UpdateMainMenu()">
                    Update <span class="fa fa-floppy-o" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
</div>

   <!-- Get MenüInfo --> 
   function GetMainMenu(MAINMENUCODE) { 
        $.ajax({
            url: "/Sistem/GetMainMenuAjax",
            data: { MAINMENUCODE: MAINMENUCODE },
            type: "Get",
            contentType: "application/json;charset=UTF-8",
            dataType: "Json",
            success: function (result) { 
                $('#txtID').val(result.data.ID);
                $('#txtMainMenuCode').val(result.data.MAINMENUCODE);
                $('#txtMainMenuName').val(result.data.MAINMENUNAME);
                $('#txtIcon').val(result.data.ICON); 
                $('#btnSave').hide();
                $('#btnUpdate').show();               
                $('#MainMenuModal .close').css('display', 'none');
                $('#MainMenuModal').modal('show');
            }
        })
    }     
     
    <!-- Update MenüInfo -->     
        function UpdateMainMenu() {
        var table = $('#tblmainMenu').DataTable();
        table.destroy();
        var model = new Object();
        model.ID = $('#txtID').val(),
            model.MAINMENUCODE = $('#txtMainMenuCode').val(),
            model.MAINMENUNAME = $('#txtMainMenuName').val(),
            model.ICON = $('#txtIcon').val(); 
        $.ajax({ 
            url: "/Sistem/UpdateMainMenu",
            type: "Post",
            data: JSON.stringify(model),
            contentType: "application/json; charset=UTF-8",
            dataType: "json",
            success: function (response) { 
                toastr.success(response.message);
                table.row('selected').cell(':eq(1)').data($('#txtMainMenuCode').val());
                table.row('selected').cell(':eq(2)').data($('#txtMainMenuName').val());
                table.row('selected').cell(':eq(3)').data($('#txtIcon').val());
                table.draw(); 
            }
        }); 
    }

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 13

Reply
ANSWER
User: dharmendr
Replied: on Apr 23, 2020 08:55 AM
Modified: on May 03, 2020 09:53 AM
Report

Hi alya14,

Please check the below sample.

Database

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

I have already inserted few records in the table.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        TestEntities entity = new TestEntities();
        return View(entity.Customers.ToList().Take(4));
    }

    public JsonResult GetCustomer(int Id)
    {
        TestEntities entity = new TestEntities();
        Customer customer = entity.Customers.Where(x => x.CustomerId == Id).FirstOrDefault();
        return Json(new { success = true, data = customer }, JsonRequestBehavior.AllowGet);
    }

    public JsonResult UpdateCustomer(Customer customer)
    {
        TestEntities entity = new TestEntities();
        Customer customerUpdate = entity.Customers.Where(x => x.CustomerId == customer.CustomerId).FirstOrDefault();
        customerUpdate.Name = customer.Name;
        customerUpdate.Country = customer.Country;
        entity.SaveChanges();
        string message = "Record Saved Successfully ";
        bool status = true;
        return Json(new { status = status, message = message }, JsonRequestBehavior.AllowGet);
    }
}

View

@model IEnumerable<_483449_jQuery_DataTable_RowUpdate_Modal_MVC.Customer>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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" />
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
    <script>
        var row;
        $(function () {
            $('#tblCustomers').DataTable();
        });
        function GetCustomer(ele, id) {
            row = $(ele).closest('tr');
            $.ajax({
                url: "/Home/GetCustomer",
                data: { Id: id },
                type: "Get",
                contentType: "application/json;charset=UTF-8",
                dataType: "Json",
                success: function (result) {
                    $('#txtID').val(result.data.CustomerId);
                    $('#txtName').val(result.data.Name);
                    $('#txtCountry').val(result.data.Country);

                    $('#btnSave').hide();
                    $('#btnUpdate').show();
                    $('#CustomerModal .close').css('display', 'none');
                    $('#CustomerModal').modal('show');
                }
            })
        }

        function UpdateCustomer() {
            var table = $('#tblCustomers').DataTable();
            table.destroy();
            var model = {};
            model.CustomerId = $('#txtID').val();
            model.Name = $('#txtName').val();
            model.Country = $('#txtCountry').val();

            $.ajax({
                url: "/Home/UpdateCustomer",
                type: "Post",
                data: JSON.stringify(model),
                contentType: "application/json; charset=UTF-8",
                dataType: "json",
                success: function (response) {
                    $('#CustomerModal .close').css('display', 'none');
                    $('#CustomerModal').modal('hide');
                    table.cell(row, 1).data($('#txtName').val());
                    table.cell(row, 2).data($('#txtCountry').val());
                    table.draw();
                }
            });

        }
    </script>
</head>
<body>
    <table id="tblCustomers" class="table table-responsive-sm table-condensed  table-bordered">
        <thead>
            <tr>
                <th>@Html.DisplayNameFor(model => model.CustomerId)</th>
                <th>@Html.DisplayNameFor(model => model.Name)</th>
                <th>@Html.DisplayNameFor(model => model.Country)</th>
                <th>Aksiyon</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.CustomerId</td>
                    <td>@item.Name</td>
                    <td>@item.Country</td>
                    <td>
                        <a class='fa fa-list' onclick="GetCustomer(this,@item.CustomerId)" style='color: #428bca;' data-toggle='tooltip' title='UpdateCustomer' href='javascript:;'></a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <div class="modal fade" id="CustomerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLable" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" style="margin: 0 auto;" id="ModalTitle">Ana Menü Ekle</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="mConta">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input id="txtID" style="display:none" type="text" placeholder="ID" />
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12">
                                <input id="txtName" class="form-control tooltip-test" title="Name" type="text" />
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12">
                                <input id="txtCountry" class="form-control tooltip-test" type="text" title="Country" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btnClose" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success" id="btnSave">
                        Save <span class="fa fa-floppy-o" aria-hidden="true"></span>
                    </button>
                    <button type="button" class="btn btn-success" id="btnUpdate" onclick="UpdateCustomer()">
                        Update <span class="fa fa-floppy-o" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Refresh jQuery DataTable after row update in ASP.Net MVC

Company

Explore

Follow us

Contact Us