Problem in reloading page(table) after deleting record from database

Question

I have a ASP.NET CORE MVC application with a table listing some clients (CRUD) and I can delete users when I click in delete.

The problem that i'm trying to resolve is when I refresh the page after delete the records from the listing the listing still show the deleted record when in the database the record is deleted and if I reload (F5) the page manually the record disappear.

I already try the location.reload(), windows.location.reload() and nothing... I can saw that page is reloading but the record don't disappear.

My code is above:

<script type="text/javascript">

        function toggleChecked(status) {
            $("#checkboxes input").each(function () {

                // Set the checked status of each to match the
                // checked status of the check all checkbox:
                $(this).prop("checked", status);
            });
        }

        function Delete(id) {
            var example_table = $("#example1")
            var r = confirm("Are you sure you want to Delete?");
            if (r == true) {

                $.ajax(
                {
                    type: "POST",
                    url: '@Url.Action("Delete", "Clients")',
                    data: {
                        id: id
                    },
                    error: function (result) {
                        alert("error");
                    },
                    success: function (result) {
                        if (result == true) {
                            example_table.ajax.reload(); // -->> The problem is in this line!
                            location.reload(); // -->> The problem is in this line!
                        }
                        else {
                            alert("There is a problem, Try Later!");
                        }
                    }
                });
            }

        }



        $(document).ready(function () {
            //Set the default value of the global checkbox to true:
            $("#checkall").prop('checked', false);

            // Attach the call to toggleChecked to the
            // click event of the global checkbox:
            $("#checkall").click(function () {
                var status = $("#checkall").prop('checked');
                toggleChecked(status);
            });
        });


    </script>

The back-end Delete:

[HttpPost]
        public bool Delete(int id)
        {
            try
            {
                Clients client = db.Clients.Where(s => s.Id == id).First();
                db.Clients.Remove(client );
                db.SaveChanges();
                return true;
            }
            catch (System.Exception)
            {
                return false;
            }

        }

I want that the deleted record disappear in real time without have to refresh the page manually. If you can help me I appreciate.

Answer 1

If the delete is sucessful you could manually remove that item from the list in the sucess of the ajax call. However with the reload, does the reload of the page call the database and get a list of data? If this is not triggered from the reload then it wont be updating the list. If it is then my only suggestion would be that cookies may be storing the list?

Answer 2

For Server side refresh you can use Response.Redirect(Request.RawUrl)

For Client side refresh you can use window.location.href= window.location

Or document.location.reload() instead of location.reload()