ASP.NET Core MVC中Ajax提交后视图未正确更新问题

你遇到的核心问题是Ajax提交POST请求后，后端的重定向操作没有触发浏览器的页面跳转：

• 当用Ajax发送Save请求时，后端的RedirectToAction不会让浏览器自动跳转到GET页面，而是把重定向后生成的整个页面HTML作为响应内容返回给Ajax请求（这就是你控制台看到整个网站HTML的原因）。
• 此时浏览器当前页面并没有刷新，仍然保留着拖拽排序后的DOM状态，自然显示的是未更新的Order列，只有手动刷新才会重新请求GET接口加载最新数据。

根据你的需求，有两种可行的处理方式：

方案1：改用普通表单提交（最简单） #

放弃Ajax，用标准的HTML表单提交请求：

• 将Save按钮包裹在<form>标签内，指定method="post"和对应的控制器Action路径：

<form asp-action="SaveSortOrder" asp-controller="YourController" method="post">
    <!-- 这里放排序相关的隐藏字段，存储拖拽后的顺序数据 -->
    <button type="submit" class="btn btn-primary">Save</button>
</form>

这种方式下，后端的RedirectToAction会正常触发浏览器跳转，页面会重新加载并渲染最新的排序数据。

方案2：保留Ajax，手动处理重定向 #

如果必须使用Ajax（比如需要在提交前做额外校验或动画），需要修改后端和前端逻辑：

1. 后端修改：不再返回RedirectToAction，而是返回包含重定向URL的JSON结果：

[HttpPost]
public IActionResult SaveSortOrder(List<YourSortModel> sortedItems)
{
    // 执行排序保存逻辑到数据库
    _yourDbContext.SaveChanges();
    
    // 返回重定向地址
    return Json(new { redirectUrl = Url.Action("Index", "YourController") });
}

2. 前端修改：在Ajax的成功回调中，通过window.location.href手动跳转到目标页面：

// 假设你用jQuery的Ajax
$.ajax({
    url: '/YourController/SaveSortOrder',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(yourSortedData),
    success: function(res) {
        if (res.redirectUrl) {
            // 跳转到目标页面，触发刷新
            window.location.href = res.redirectUrl;
        }
    }
});

你移除Ajax的success和error事件没用，是因为Ajax本身会接收后端返回的HTML响应，但不会自动触发浏览器跳转——当前页面的DOM没有被替换，所以还是显示旧的排序状态。必须主动触发页面跳转或刷新，才能加载最新数据。

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