从控制器（jquery ajax）获取数据时将数据两次附加到表中答案

【问题标题】：append data two time to the table when get data from controller(jquery ajax)从控制器（jquery ajax）获取数据时将数据两次附加到表中
【发布时间】：2016-07-03 12:26:43
【问题描述】：

最近我遇到了困惑的问题。

我想根据下面的链接延迟加载： ASP.NET MVC Infinite Scrolling Jquery

当运行项目并使用了实现 .一切正常，但 jquery 没有。它两次附加我的数据见图片： pay attention to first field which is a number

一切正常（萤火虫说明正确数据）但是那里发生了什么。

我的 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; }
}

【问题讨论】：

显示您调用的控制器方法及其返回的视图（并查看您生成的 html - 最好的猜测是您有多个 <tbody> 元素
是的先生，我显示控制器方法，我的调用是上面显示的javascript的第二部分，我不是说多个tbody请给我看
您还没有向您展示部分视图:) lenght 的值是多少（我假设它是 10？）
lenght 是一个 const 值，可以是 15 或其他值，我现在更新了帖子
你还没有显示你的局部视图:)

标签： jquery asp.net-mvc asp.net-mvc-4 jquery-ajaxq

【解决方案1】：

我的问题通过仅删除一个 tbody 解决了，因此在感觉后面生成了两个 tbody，因此通过避免 <tbody></tbody> 明确地解决了我们的问题并且它可以正常工作。

tnx 并祝贺斯蒂芬·穆克先生

【讨论】：