使用 MVC4 和 Ajax。我正在加载 5 条记录,并在 Windows 上向下滚动加载接下来的 5 条记录..等等
Controller :(有效)
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>
模型第一次传递到部分 View 并且数据成功加载。向下滚动时,FeachData 操作将被执行,我可以看到数据已成功检索。
我的问题是,当 FeachData 方法传递模型时,如何将模型传递到部分 View 并附加到现有记录?
部分 View 除了模型之外,还有一个 @foreach (var item in Model){..} 循环并显示数据。
谢谢
最佳答案
如果您的模型是集合,请使用 .Take()
和 .Skip()
过滤所需的记录并根据结果返回部分 View 。
Controller
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 的替代方案
Controller
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");
}
});
}
关于jquery - MVC4 Ajax 在 Windows 滚动上加载记录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26368613/