javascript - Asp.Net MVC 中的无限滚动与 jQuery/AJAX 问题

Question

我的 ASP.Net (MVC) 应用程序中的无限滚动功能大部分都能正常工作，尽管有时会出现一些稍微奇怪的行为。

我遇到的问题是，当我滚动时，它似乎多次加载同一批项目 - 但如果我在 Controller 代码中放置一个断点并减慢速度，它就可以正常工作!即使我在 jQuery 代码中添加了一个警报，看起来也不错 - 就像我多次滚动触发点并且调用 ListMore 操作太多次 - 这就是我能想到的一切，正如我所说的，如果我设置一个中断指向我的 Controller ，它的速度足够慢，而且我没有看到它多次发射!

我在部分 View 中放置了一些调试计数器，这样我就可以看到它多次加载页面 2。

我创建了一个部分 View /新的 Controller 方法来检索第 2 页及之后的数据(第 1 页是通过主视图 Controller 方法加载的)

public PartialViewResult ListMore(int id = 0, int page = 1, int sort = 0)
{
    int pageSize = AppConstants.PageSize;

    // get the products for this category
    var prods = mgr.GetProducts(id, sort);

    CategoryViewModel model = new CategoryViewModel
    {
        Products = prods
        .Skip((page - 1) * pageSize)
        .Take(pageSize)
    };

    return PartialView("_ListMore", model);
}

局部 View 非常简单:

@model TooledUp.WebUI.Models.Catalog.CategoryViewModel

@foreach (var item in Model.Products)
{
    <div class="col-1-3">
        @{Html.RenderPartial("_ProductGrid", item);}
    </div>
}

然后我的主视图中有以下内容:

<div class="row clearfix">
    @foreach (var item in Model.Products)
    {
        <div class="col-1-3">
            @{Html.RenderPartial("_ProductGrid", item);}
        </div>
    }
    <div id="listmore"></div>
</div>

<div id="progress" style="display:none;">
    <img src="~/Content/images/Spinner.gif" alt="Loading" /> Loading more     products...
</div>
<div id="progressmarker"></div>

我的 jQuery/ajax 代码如下(在主视图中) - Model.PagingInfo 内容仅在调用主视图时设置一次。

<script type="text/javascript">

var categoryId = @Model.CurrentCategoryID;
var pageSize = @Model.PagingInfo.ItemsPerPage;
var pageIndex = 2; // already loaded page 1 - this is next to get
var sortIndex = @Model.PagingInfo.SortBy;
var pages = @Model.PagingInfo.TotalPages;

$(window).scroll(function() {
    var hT = $('#progressmarker').offset().top,
        hH = $('#progressmarker').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if ((pages + 1) > pageIndex)
    {
        if (wS > (hT+hH-wH)){
            //alert(pageIndex);
            GetData();
        }
    }
});

function GetData() {
    $.ajax({
        type: 'GET',
        url: '/category/ListMore',
        data: {
            "id": categoryId,
            "page": pageIndex,
            "sort": sortIndex
        },
        dataType: 'html',
        success: function (data) {
            if (data != null) {
                $("#listmore").append(data);
                pageIndex++;
            }
        },
        beforeSend : function () {
            $("#progress").show();
        },
        complete : function () {
            $("#progress").hide();
        },
        error: function () {
            alert("Error while retrieving data!");
        }
    });
}
</script>

当我更改 pageIndex++ 代码的位置时(因为我认为它在渲染额外内容之前触发得不够快，因此相同的内容可以加载两次)，它所做的只是以另一种方式破坏它，所以快速滚动会使页面( block )被跳过，因此它会增加得太快 - 从第 2 页跳到第 5 页!

总而言之，我的问题是控制滚动仅在每个页面( block )触发一次，但始终为连续页面触发。

Answer 1

这就是我根据建议最终所做的:

$(window).scroll(function () {
    var hT = $('#progressmarker').offset().top,
        hH = $('#progressmarker').outerHeight(),
        wH = $(window).height(),
        wS = $(window).scrollTop();
    // don't do it if we have reached last page OR we are still grabbing items
    if (pages >= pageIndex && !_incallback) {
        if (wS > (hT + hH - wH)) {
            GetData();
        }
    }
});

function GetData() {
    _incallback = true;
    $.ajax({
        type: 'GET',
        url: '/category/ListMore',
        data: {
            "id": categoryId,
            "page": pageIndex,
            "sort": sortIndex
        },
        dataType: 'html',
        success: function (data) {
            if (data != null) {
                $("#listmore").append(data);
                pageIndex++;
            }
        },
        beforeSend: function () {
            $("#progress").show();
        },
        complete: function () {
            $("#progress").hide();
            _incallback = false;
        },
        error: function () {
            //alert("Error while retrieving data!");
            _incallback = false;
        }
    });
}

现在似乎工作正常，谢谢。