从控制器获取数据时将数据两次附加到 table(jquery ajax)
append data two time to the table when get data from controller(jquery ajax)
最近遇到了困惑的问题
我想按照下面的方式延迟加载link:
ASP.NET MVC Infinite Scrolling Jquery
当 运行 项目并使用实现 .一切正常,但 jquery 不正常。
它两次附加我的数据见图片:
pay attention to first field which is a number
一切正常(firebug说明正确数据)
但是那里发生了什么。
我的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>
inf 模型
public class inf
{
public int id { get; set; }
public string name { get; set; }
}
我的问题是通过只删除一个 tbody 来解决的,这样在感觉后面产生了两个 tbody 所以通过避免 <tbody></tbody>
明确地解决了我们的问题并且它正常工作。
tnx 和 MR Stephen Muecke 的祝贺
最近遇到了困惑的问题
我想按照下面的方式延迟加载link: ASP.NET MVC Infinite Scrolling Jquery
当 运行 项目并使用实现 .一切正常,但 jquery 不正常。 它两次附加我的数据见图片: pay attention to first field which is a number
一切正常(firebug说明正确数据) 但是那里发生了什么。
我的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>
inf 模型
public class inf
{
public int id { get; set; }
public string name { get; set; }
}
我的问题是通过只删除一个 tbody 来解决的,这样在感觉后面产生了两个 tbody 所以通过避免 <tbody></tbody>
明确地解决了我们的问题并且它正常工作。
tnx 和 MR Stephen Muecke 的祝贺