基于jQuery Ajax与.NET MVC实现无限滚动的方案咨询

你的无限滚动核心实现思路完全正确！通过拆分主视图和分页数据接口，结合滚动触发Ajax加载的方式，正是实现无限滚动的标准方案。不过代码里有几个细节问题需要调整，我帮你梳理下：

1. 控制器方法的关键细节 #

• 分页数据源要正确：你的FetchCar方法里，model.cars = model.cars.Skip(skip).Take(take).ToList();这里要注意，必须基于原始的完整汽车数据集合做分页，而不是已经分页后的结果。如果你的CreatePartsViewModel()是一次性获取所有数据，那每次调用FetchCar都要重新获取原始数据再分页；更优的方式是直接在数据库查询阶段就加入Skip和Take，避免一次性加载全量数据，减轻服务器和前端的压力。
• 明确指定部分视图：返回PartialView时最好指定视图名称，比如return PartialView("_CarPartsList", model);，避免框架默认寻找和方法同名的视图导致错误。

2. 前端Ajax的语法与逻辑修正 #

你的JS代码里有几个语法和逻辑问题，这很可能是导致加载失败的原因：

• JS里不能用C#的int声明变量，要改成let skip = 10;（初始加载了10条，下一次从10开始）
• 数据传递格式错误，应该是data: { skip: skip, take: take }，而不是你写的那种格式
• 滚动触发条件可以优化：$(window).scrollTop() + $(window).height() == $(document).height()容易因为浏览器精度问题错过触发时机，改成$(window).scrollTop() + $(window).height() >= $(document).height() - 100，提前100像素触发，体验更好
• 防止重复请求：加一个加载状态变量isLoading，避免用户快速滚动时多次触发请求
• 指定容器追加内容：不要用$("div").append(result)，要给主视图里的内容容器加个ID（比如car-parts-container），用$("#car-parts-container").append(result)，避免污染其他页面元素

3. 初始加载的参数传递 #

主视图里调用Html.RenderAction时，要传递初始的分页参数：

<div id="car-parts-container">
    @{ Html.RenderAction("FetchCar", "Home", new { skip = 0, take = 10 }); }
</div>

修正后的完整示例代码 #

控制器代码 #

[HttpGet]
public ActionResult Parts()
{
    return View();
}

[HttpGet]
public async Task<ActionResult> FetchCar(int skip, int take)
{
    // 推荐：直接在数据库查询阶段就分页，而不是先获取全量数据
    var model = await CreatePartsViewModel();
    model.Cars = model.Cars.Skip(skip).Take(take).ToList();
    // 指定返回的部分视图
    return PartialView("_CarPartsList", model);
}

主视图（Parts.cshtml） #

<div id="car-parts-container">
    @{ Html.RenderAction("FetchCar", "Home", new { skip = 0, take = 10 }); }
</div>

<script>
$(function() {
    let skip = 10; // 初始已加载10条，下一页从10开始
    const take = 10;
    let isLoading = false;

    $(window).scroll(function () {
        // 只有不在加载状态，且接近页面底部时才触发请求
        if (!isLoading && $(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
            isLoading = true;
            // 显示加载提示
            $("#car-parts-container").append('<div class="loading text-center">加载中...</div>');
            
            $.ajax({
                url: '/Home/FetchCar/',
                type: "GET",
                data: { skip: skip, take: take },
                success: function (result) {
                    // 移除加载提示
                    $(".loading").remove();
                    // 追加新内容
                    $("#car-parts-container").append(result);
                    skip += take;
                    isLoading = false;
                    
                    // 如果返回内容为空，说明没有更多数据，解绑滚动事件
                    if (!result.trim()) {
                        $(window).off("scroll");
                        $("#car-parts-container").append('<div class="text-center">已加载全部内容</div>');
                    }
                },
                error: function() {
                    $(".loading").remove();
                    isLoading = false;
                    alert("加载失败，请稍后重试");
                }
            });
        }
    });
});
</script>

部分视图（_CarPartsList.cshtml） #

@model PartsViewModel
@foreach (var car in Model.Cars)
{
    <div class="car-container mb-4">
        @foreach (var part in car.Parts)
        {
            @if (part != null)
            {
                @Html.Partial("_Part", part)
            }
        }
    </div>
}

只要修正这些细节，你的无限滚动就能正常工作了！

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