使用Ajax和ASP.NET Core 6.0 MVC仓库模式实现表格行删除(前端失效)
问题分析与解决
你的后端逻辑和接口测试正常,但前端Ajax调用无效,核心问题出在请求URL格式错误以及DELETE请求参数传递方式不当,具体修正点如下:
1. 修复URL参数拼接错误
当前URL写法缺少参数赋值的等号,导致后端无法识别ID参数:
// 错误写法 url: '/api/Publication/DeletePublication?id' +publicationId,
修正为:
// 正确写法 url: '/api/Publication/DeletePublication?id=' + publicationId,
2. 简化DELETE请求配置
后端Action通过URL参数接收id,无需在请求体中传递JSON数据(部分浏览器/服务器不支持DELETE请求带请求体),可以移除冗余配置:
$.ajax({ url: '/api/Publication/DeletePublication?id=' + publicationId, type: "DELETE", dataType: "json", success: function(data) { $('#btnDelete' + publicationId).closest('tr').remove(); $('.tdSrNo').each(function (index) { $(this).html(index + 1); }); alert("Deleted successfully"); }, // 新增错误回调,方便排查问题 error: function(xhr, status, error) { console.error("删除失败:", error); alert("删除失败,请查看控制台日志"); } });
3. 优化ID获取逻辑(可选)
给按钮添加自定义属性直接存储ID,避免字符串替换的繁琐操作:
<button class='btn btn-info btnDelete' data-id='@obj.id'>Delete</button>
JS中直接读取:
var publicationId = $(this).data('id');
4. 后端返回明确状态(可选)
将后端Action返回类型改为IActionResult,让前端能更清晰判断请求结果:
[HttpDelete] [Route("DeletePublication")] public IActionResult DeletePublication(int id) { iPublications.DeletePublication(id); return Ok(new { success = true, message = "删除成功" }); }
完成以上修正后,前端Ajax即可正常调用后端接口,实现将对应行数据Status置为False的操作。
内容的提问来源于stack exchange,提问作者musfirah hamid
相关产品推荐
相关产品推荐

