最近我遇到了困惑的问题。
我想根据下面的链接延迟加载: ASP.NET MVC Infinite Scrolling Jquery
当运行项目并使用实现的功能时。一切正常,但 jquery 没有。它两次附加我的数据见图片: 注意第一个字段是一个数字
一切都很好(萤火虫说明了正确的数据)但是那里发生了什么。
我的jQuery代码是:
var page = 1;
var scrollHandler = function () {
if (($(window).scrollTop() == $(document).height() - $(window).height()))
loadMoreToInfiniteScrollTable();
}
function loadMoreToInfiniteScrollTable() {
page++;
$.ajax({
type: 'GET',
url: dataUrl,
data: "p=" + page,
success: function (data) {
if (data) {
$('tbody').append( data );
}
}
});
}
调用方法
<script type="text/javascript">
var dataUrl = '@Url.RouteUrl("UserInfo")';
$(window).scroll(scrollHandler);
</script>
控制器操作方法:一次填充视图
public List<inf> lst;
public ActionResult ExpressionDetail()
{
var data = lst.Where(f=>f.id>0&&f.id<lenght).OrderBy(i=>i.id);
return View(data);
}
以及页面分离的部分视图:
[HttpGet]
public ActionResult _TableData(int? p=0)
{
int firstfrom = p ?? 1;
int endfrom = (firstfrom > 1 ? (firstfrom - 1) * lenght : 0);
var g= lst.OrderBy(i=>i.id).Skip(endfrom-1).Take(lenght).AsEnumerable();
return PartialView(g);
}
路线配置:
routes.MapRoute("UserInfo", "",new {Controller= "Default", Action= "_TableData" });
常量长度:
public const int lenght = 15;
部分视图:
@model IEnumerable<testable.Models.inf>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.id)
</td>
<td>
@Html.DisplayFor(modelItem => item.name)
</td>
</tr>
}
和主要观点:
@model IEnumerable<testable.Models.inf>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ExpressionDetail</title>
</head>
<body>
<table class="table">
<tr>
<th>
Id
</th>
<th>
name
</th>
</tr>
@Html.Partial("_TableData", Model)
<tbody>
</tbody>
</table>
</body>
</html>
模型
public class inf
{
public int id { get; set; }
public string name { get; set; }
}