Question

我在asp.net mvc 5中有一个列表

我限制了要在页面中显示的记录数。

现在滚动我做ajax调用，第一次调用工作正常但是当我向下滚动更多时它重复调用该函数5到10次并丢失它再次显示数据，这真的很奇怪，我找不到解决方案< / p>

我的控制器：

 httpRequest.send('next=' + encodeURIComponent(y));

我的模特：

public ActionResult Index()
{
    int starting = 0;
    if (Request.Form["starting"] != null)
    {
        starting = Convert.ToInt32(Request.Form["starting"]);
    }

    int takes = 15;
    if (Request.Form["takes"] != null)
    {
        takes = Convert.ToInt32(Request.Form["takes"]);
    }
    //string strpost = "&ajax=1";

    var query = db.MyEmployee.ToList().Skip(starting).Take(takes);


    if (Request.IsAjaxRequest())
    {

        starting = starting+15;
        query = db.MyEmployee.ToList().Skip(starting).Take(takes);
        ViewData["starting"] = starting;
        ViewBag.takes = takes;
        return PartialView("_PartialIndex",query);
    }
    ViewBag.starting = starting;
    ViewBag.takes = takes;
    return View(query);

}

我的视图和部分视图代码：

     public class Employee
{
    public int Id { get; set; }
    public string FullName { get; set; }
    public string Email { get; set; }
}

Answer 1

您当前的代码只是在每次滚动和进行ajax调用时替换现有视图，而不是使用您想要的下一组行更新现有视图。您的代码也存在一些效率低下的问题，例如在调用.Skip()和.Take()之前将所有记录具体化到内存集中。

您需要将其分为两个单独的方法和视图，一个用于生成初始视图，另一个用于返回您想要附加到主视图的记录的一部分。

控制器

public ActionResult Index()
{
    return View();
}
public ActionResult Fetch(int startIndex)
{
    query = db.MyEmployee.OrderBy(x => x.ID).Skip(startIndex).Take(15);
    return PartialView(query);
}

Index.cshtml

@model IEnumerable<MVC5WAuth.Models.Employee>
....
<table class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.Id)</th>
            ....
        </tr>
    </thead>
    <tbody id="tbody">
        @{ Html.RenderAction("Fetch", new { startIndex = 0 }); } // generate the 1st 15 rows
    </tbody>
</table>

<script type="text/javascript">
    var start = 15;
    var url = '@Url.Action("Fetch")';
    var tbody = $('#tbody');
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            ....
            $.get(url, { startIndex: start }, function(response) {
                tbody.append(response);
                start += 15; // increment for next call
            });
        }
    });
</script>

Fetch.cshtml

@model IEnumerable<MVC5WAuth.Models.Employee>
@foreach (var item in Model)
{
    <tr>
        <td>@Html.DisplayFor(m => item.Id)</td>
        ....
    </tr>
}

ASP.Net MVC 5通过ajax加载列表数据

1 个答案: