数据库中的记录被删除，但前端界面上仍保留删除按钮

Question

当点击删除按钮时，它成功地从数据库中删除记录。但是在前端页面上并没有立即删除，需要重新加载或刷新页面后才会显示删除结果。

我的视图：

@foreach (var item in Model)
{
<a href="#" class="phone_number" onclick="del(this)" data-id="@item.id">
 <i class="fas fa-trash-alt"></i>
</a> 
}
<script>
 function del(x) {
            var url = '@Url.Action("deleteRent", "Home")';
            
            var rd = x.dataset.id
            debugger

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    id: rd
                },
                success: function (data) {
                    if (data.length == 0) // No errors
                        alert("删除成功！");
                },
                error: function (jqXHR) { // Http Status is not 200
                },
                complete: function (jqXHR, status) { // Whether success or error it enters here
                }
            });
        };
       </script>

Answer 1

请在alert后面添加window.location.reload()代码....

success: function (data) {
                if (data.length == 0) // 没有错误
                    alert("删除成功！");
                    **window.location.reload();**
            },

此代码在成功后会自动重新加载您的页面

Answer 2

实际上，你从数据库中删除了数据，但你没有刷新页面。

要么，你使用Dipendrasinh Vaghela的答案并刷新整个页面。

或者，如果你有一个在DOM中搜索和显示的函数，你可以在删除成功时调用它。这将“只”更新显示数据的部分。