Windows 滚动上的 MVC4 Ajax 加载记录

Question

使用 MVC4 和 Ajax。我正在加载 5 条记录并在 Windows 上向下滚动加载接下来的 5 条记录..etc

控制器：（工作）

    public JsonResult FetchData(int pageIndex = 0)
    {
      var model = ...
      ViewBag.count = pageIndex*2;

      return Json(model, JsonRequestBehavior.AllowGet);
    }          

查看

javascript：

$(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            FetchDataFromServer();
        }
    });
});

  function FetchDataFromServer() {
    var Id = $(".postcount").attr("Id");
    $.ajax({
        url: '@Url.Action("FetchData")',
        data: { pageIndex: Id },
        datatype: 'application/json',
        success: function () {
            //?
        },
        error: function () {
            alert("error");
        }
  });


 <div id="result">
   @Html.Partial("_ResultList",Model)
</div>

模型第一次被传递到局部视图并且数据成功加载。向下滚动时，Action FeachData 被执行，我可以看到数据被成功检索。

我的问题是当 FeachData 方法传递模型时，如何将模型传递给 Partial View 并附加到现有记录？

部分视图不包括模型，并有一个 @foreach（模型中的变量项）{..} 循环并显示数据。

谢谢

Answer 1

如果您的模型是一个集合，请使用.Take() 和.Skip() 过滤您想要的记录并根据结果返回部分视图。

控制器

public ActionResult FetchData(int skipCount, int takeCount)
{
  var model = db.MyObjects.OrderBy(x => x.SomeProperty).Skip(skipCount).Take(takeCount);
  if (model.Any())
  {
    return PartialView("_ResultList", model);
  }
  else
  {
    return null;
  }
}

脚本

var skipCount = 5; // start at 6th record (assumes first 5 included in initial view)
var takeCount = 5; // return new 5 records
var hasMoreRecords = true;

function FetchDataFromServer() {
  if (!hasMoreRecords) {
    return;
  }
  $.ajax({
    url: '@Url.Action("FetchData")',
    data: { skipCount : skipCount, takeCount: takeCount },
    datatype: 'html',
    success: function (data) {
      if (data === null) {
        hasMoreRecords = false; // signal no more records to display
      } else {
        $("#result").append(data);
        skipCount += takeCount; // update for next iteration
      }
    },
    error: function () {
      alert("error");
    }
  });
}

编辑：使用 JSON 的替代方法

控制器

public ActionResult FetchData(int skipCount, int takeCount)
{
  var model = db.MyObjects.OrderBy(x => x.SomeProperty).Skip(skipCount).Take(takeCount);
  return Json( new { items = model, count = model.Count() }, JsonRequestBehavior.AllowGet);
}

脚本

var skipCount = 5; // start at 6th record (assumes first 5 included in initial view)
var takeCount = 5; // return new 5 records
var hasMoreRecords = true;

function FetchDataFromServer() {
  if (!hasMoreRecords) {
    return;
  }
  $.ajax({
    url: '@Url.Action("FetchData")',
    data: { skipCount : skipCount, takeCount: takeCount },
    datatype: 'json',
    success: function (data) {
      if (data.Count < 5) {
        hasMoreRecords = false; // signal no more records to display
      }
      $.each(data.items, function(index, item) {
        // assume each object contains ID and Name properties
        var container = $('<div></div>');
        var id = $('<div></div>').text($(this).ID);
        container.append(id);
        var name = $('<div></div>').text($(this).Name);
        container.append(name);
        $("#result").append(container);
      });
      skipCount += takeCount; // update for next iteration
    },
    error: function () {
      alert("error");
    }
  });
}

Answer 2

而不是 Json 从操作返回部分视图：

public ActionResult FetchData(int pageIndex = 0)
    {
      var model = ...
      ViewBag.count = pageIndex*2;

      return View("_ResultList",model);
    }  

在 Success 回调中，您将获得响应 html，您需要使用 append() 将其附加到该 div：

success: function (response) {
            $("#result").append(response);
        }

你也可以看到this post. Infinite Scroll Paging in Asp.net mvc 4