Question

我的ASP.Net（MVC）应用程序中有无限滚动，但有时会有一些有点奇怪的行为。

我遇到的问题是，当我滚动时，它似乎不止一次加载到同一批项目中 - 但如果我在控制器代码中放置一个断点并将其全部放慢，则它工作正常！即使我在我的jQuery代码中发出了一个看起来也不错的警报 - 它就像我多次滚动触发点并且它多次调用ListMore动作 - 这都是全部无论如何，正如我所说的那样，如果我在控制器中设置一个断点，使其减速足够慢，而且我不会多次看到它发射！

我在部分视图中放了一些调试计数器，所以我可以看到它多次加载第2页。

我创建了一个局部视图/新控制器方法来检索第2页及以后的数据（第1页通过主视图控制器方法加载）

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);
}

部分视图非常简单：

@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 ++代码的位置时（因为我认为在渲染额外内容之前它没有足够快地触发，所以相同的内容可以加载两次）所有它确实打破了另一个方式，以便快速滚动将使页面（块）被跳过，因此它会增加太快 - 从第2页跳到5！

总结一下，我的问题是控制滚动每页仅触发一次（块），但总是触发顺序页面。

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;
        }
    });
}

似乎工作正常，谢谢你。

使用jQuery / AJAX问题在Asp.Net MVC中无限滚动

1 个答案: