如何使用Ajax实现ASP.NET Core页面指定div局部刷新

问题分析 #

你现在的问题核心是：调用的Pre Action返回的是完整的页面视图（包含两个div及所有内容），用load方法会把整个视图塞进#Refresh容器里，自然导致了类似全页刷新的问题。要实现只更新目标table，我们需要拆分出专门的局部视图和接口来处理这个需求，具体步骤如下：

1. 在HomeController中新增局部视图接口 #

新增一个只负责获取需要刷新的sport数据、返回局部视图的Action，避免返回完整页面：

public IActionResult RefreshSportTable()
{
    var sportList = (from a in _context.sport 
                    select new Sport_test() {
                        SportName = a.sport_Name,
                    }).Take(20).ToList();
    return PartialView("_SportTablePartial", sportList);
}

2. 创建对应的局部视图 #

右键Views/Home文件夹，添加Partial View（命名为_SportTablePartial.cshtml），里面只保留需要刷新的table内容：

<table class="table" style="color:white;background-color:#808080">
    <thead>
        <tr>
            <th scope="col">name sport</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model) {
            <tr>
                <td>@item.SportName</td>
            </tr>
        }
    </tbody>
</table>

3. 修改原视图的Refresh容器 #

在原View中，#Refresh div的内容直接引用这个局部视图，保证初始加载和后续刷新的内容一致：

<div class="col-lg-5" id="Refresh">
    @await Html.PartialAsync("_SportTablePartial", Model.sport)
</div>

4. 修正前端脚本实现定时刷新 #

注意原代码的setTimeout只会执行一次，如果需要持续定时刷新，改用setInterval；同时调用新的Action加载局部视图：

$(document).ready(function () {
    // 每2.3秒刷新一次目标容器
    setInterval(function () {
        $("#Refresh").load('@Url.Action("RefreshSportTable", "Home")');
    }, 2300);
});

如果需要更灵活的错误处理，也可以用原生AJAX手动实现：

$(document).ready(function () {
    setInterval(function () {
        $.ajax({
            url: '@Url.Action("RefreshSportTable", "Home")',
            type: 'GET',
            success: function (data) {
                $("#Refresh").html(data);
            },
            error: function () {
                console.log('刷新sport表格失败');
            }
        });
    }, 2300);
});

这样修改后，每次刷新只会请求并更新#Refresh容器内的table内容，完全不会影响页面其他部分，也不会出现全页刷新的问题。

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