如何在ASP.NET MVC中不刷新页面删除数据库记录？

原代码存在的核心问题 #

• jQuery选择器缺失$符号，无法正确绑定事件
• 未定义$this变量，导致DOM操作报错
• 类名操作时错误添加了.前缀，无法正确修改样式类
• 数据库删除操作未提交到数据库（仓储模式下需调用SaveChanges）
• 未处理数据不存在、请求失败等异常场景

修正后的Ajax代码 #

$(".remove-hasan").on("click", function () {
    var $this = $(this);
    var id = $this.attr("data-id");

    $.ajax({
        url: "/Main/DeleteFavourite",
        type: "POST",
        data: { id: id },
        success: function (response) {
            if (response === "ok") {
                $(".modal-action-messages").empty().append("Ürün Başarıyla Favorilerinizden Çıkarılmıştır.");
                // 根据实际DOM结构移除对应条目，示例为找到父级列表项删除
                $this.closest(".favourite-item").remove();
            } else if (response === "notfound") {
                $(".modal-action-messages").empty().append("Ürün favorilerinizde bulunamadı.");
            }
        },
        error: function() {
            $(".modal-action-messages").empty().append("Silme işlemi sırasında bir hata oluştu.");
        }
    });
});

修正后的控制器代码 #

[HttpPost]
public IActionResult DeleteFavourite(int id)
{
    try
    {
        var favourite = _uow.Favourite.GetAll()
                                    .FirstOrDefault(p => p.ProductId == id);
        
        if (favourite == null)
        {
            return Json("notfound");
        }
        
        _uow.Favourite.Delete(favourite);
        _uow.SaveChanges(); // 提交删除操作到数据库
        
        return Json("ok");
    }
    catch (Exception)
    {
        // 可添加日志记录逻辑
        return Json("error");
    }
}

额外说明 #

1. 如果需要通过路由参数传递ID，可修改控制器路由为[HttpPost("DeleteFavourite/{id}")]，同时将Ajax的url改为"/Main/DeleteFavourite/" + id，并移除data中的id参数
2. UI更新逻辑需根据实际页面DOM结构调整，确保删除后页面元素同步移除
3. 增加异常处理和错误回调，可提升用户体验并便于排查问题

内容的提问来源于stack exchange，提问作者Hasan Ozan