無限滾動的Asp.Net MVC使用jQuery/AJAX問題

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

似乎是現在的工作好感謝。