.NET Core 2 Razor页面模型无法自动刷新问题咨询

你遇到的这个问题其实是Ajax请求的特性导致的——Ajax是异步后台请求，浏览器不会自动处理服务器返回的跳转指令。当你通过Ajax调用控制器操作后，服务器返回的RedirectToAction("Index")会被Ajax的回调函数接收，但浏览器不会主动跳转或刷新页面，这就是为什么只有强制刷新才会看到更新后的内容。

下面给你几个可行的解决方案，按从简单到优雅的顺序排列：

方案1：Ajax成功后手动跳转/刷新页面 #

这是最直接的方式，在Ajax的success回调里，直接让浏览器跳转到Index页面或者刷新当前页面，避免依赖服务器的跳转指令：

$.ajax({
    url: '/YourController/UpdateAction',
    type: 'POST',
    data: yourData,
    success: function(response) {
        // 直接跳转到Index页面，避免刷新可能带来的重复提交问题
        window.location.href = '/YourController/Index';
        // 或者如果当前已经在Index页面，也可以用刷新：
        // window.location.reload();
    },
    error: function(xhr) {
        // 处理错误逻辑
        alert('更新失败，请重试');
    }
});

对应的控制器操作可以简化，不需要返回跳转，直接返回成功状态即可（当然返回跳转也不影响，只是Ajax会忽略跳转指令）：

[HttpPost]
public IActionResult UpdateAction(YourModel model)
{
    // 执行数据库更新逻辑
    _dbContext.Update(model);
    _dbContext.SaveChanges();
    
    // 返回成功状态即可，Ajax会接收但不会处理跳转
    return Ok();
}

方案2：返回JSON结果，前端按需局部更新 #

如果不想整页刷新，可以让控制器返回更新结果，前端根据结果局部更新页面内容（比如更新某个列表、数据块），这样用户体验更流畅：

控制器代码：

[HttpPost]
public IActionResult UpdateAction(YourModel model)
{
    try
    {
        // 数据库更新逻辑
        _dbContext.Update(model);
        _dbContext.SaveChanges();
        
        // 返回更新后的最新数据
        var updatedData = _dbContext.YourEntities.ToList();
        return Json(new { success = true, data = updatedData });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message });
    }
}

前端代码：

$.ajax({
    url: '/YourController/UpdateAction',
    type: 'POST',
    data: yourData,
    success: function(response) {
        if (response.success) {
            // 局部更新页面，比如替换列表内容（根据你的视图结构调整）
            var listHtml = '';
            response.data.forEach(item => {
                listHtml += `<div class="list-item">${item.Name}</div>`;
            });
            $('#yourListContainer').html(listHtml);
        } else {
            alert('更新失败：' + response.message);
        }
    }
});

方案3：返回局部视图，替换页面核心内容 #

如果Index页面的动态内容较多，可以把核心内容抽成局部视图，更新后控制器返回这个局部视图的HTML，前端直接替换页面中的对应部分：

首先创建局部视图_IndexContent.cshtml：

@model List<YourModel>
<div id="contentContainer">
    @foreach (var item in Model)
    {
        <div class="data-item">@item.Name - @item.Description</div>
    }
</div>

在Index.cshtml中引用这个局部视图：

@{
    ViewData["Title"] = "Index";
}
<h1>数据列表</h1>
@await Html.PartialAsync("_IndexContent", Model)

控制器更新操作：

[HttpPost]
public IActionResult UpdateAction(YourModel model)
{
    // 数据库更新逻辑
    _dbContext.Update(model);
    _dbContext.SaveChanges();
    
    // 获取最新数据，返回局部视图
    var latestData = _dbContext.YourEntities.ToList();
    return PartialView("_IndexContent", latestData);
}

前端Ajax代码：

$.ajax({
    url: '/YourController/UpdateAction',
    type: 'POST',
    data: yourData,
    success: function(html) {
        // 替换页面中的内容容器
        $('#contentContainer').replaceWith(html);
    }
});

额外优化：禁用页面缓存 #

如果强制刷新才生效，也可能是浏览器缓存了旧页面内容，可以在Index控制器里添加禁用缓存的响应头：

public IActionResult Index()
{
    // 禁用浏览器缓存
    Response.Headers["Cache-Control"] = "no-cache, no-store, must-revalidate";
    Response.Headers["Pragma"] = "no-cache";
    Response.Headers["Expires"] = "0";
    
    var model = _dbContext.YourEntities.ToList();
    return View(model);
}

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