c# - 接下来不要跳过前面的 LINQ c#

Question

我正在尝试在我的项目中创建无限滚动。

场景-

我有大约 100 张图片要在我的 View 页面上呈现。对于每次滚动到底部的请求，我都会发送 LINQ take value by jQuery-

  <script type="text/javascript">
    $(function () {
        var value = 0;
        function IncreasedValue() {
            value += 10;
            return value;
        }
        $(window).scroll(function () {
            if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {

                $.ajax({
                    url: '/Home/FunHome/?valuetake=' + IncreasedValue() + '&valueskip=' + "0",
                    type: 'GET',
                    datatype: 'HTML',
                    success: function (data) {

                        $('#funhome-partial').html(data);

                    }
                });
            }
        });
    });
</script>

当滚动到底部时，它总是增加 +10。

第一次加载时，我的操作检索了 5 条记录并跳过了一条记录(工作正常)。一旦 takevalue 增加 10，我就会将该值解析为 LINQ Take()。

public ActionResult FunHome(int? valueskip, int? valuetake) {
    if (valuetake == null && valueskip == null) {
        int take = 5;
        int skip = 0;

        var cardlist = (from u in db.CardTables
                        select new CardModel {
                            cardDate = u.CardDate,
                            cardFileName = u.CardFileName,
                            cardFilePath = u.CardFilePath,
                            cardHashCode = u.CardHashCode,
                            cardID = u.CardID,
                            cardTitle = u.CardTitle

                        }).Take(take).Skip(skip);

        return View(cardlist);
    }
    else {
        int skip = 0;
        int take = Convert.ToInt32(valuetake);
        var cardlist = (from u in db.CardTables
                        select new CardModel {
                            cardDate = u.CardDate,
                            cardFileName = u.CardFileName,
                            cardFilePath = u.CardFilePath,
                            cardHashCode = u.CardHashCode,
                            cardID = u.CardID,
                            cardTitle = u.CardTitle

                        }).Take(take).Skip(skip);
        return PartialView("FunHome", cardlist);

    }
}

当前发生的情况是当 ajax 查询请求 10 条记录时，此操作检索接下来的 10 条记录并通过获取所有请求的记录再次呈现所有页面。

这会减慢我的应用程序，因为在每次滚动到底部事件时都会呈现所有记录。

注意-

我不想跳过以前的记录，因为很明显所有图片都应该可以显示。

有什么方法可以只加载下一条记录，我可以使用 LINQ 实现这一点？

Answer 1

1. Skip/Take 方法应始终按以下顺序使用:Skip 然后是 Take用于分页时。

2. Skip(0) 没有意义...

3. 您应该只从查询中返回新元素并将它们附加到您的页面，而不是替换整个 HTML 内容。在您的 JavaScript 代码中使用 append() 而不是 html()。

4. 您可以在 if/else 之前准备查询定义，然后应用适当的 Skip/Take 组合以防止代码重复。

public ActionResult FunHome(int? valueskip, int? valuetake) {

    var query = (from u in db.CardTables
                 select new CardModel {
                     cardDate = u.CardDate,
                     cardFileName = u.CardFileName,
                     cardFilePath = u.CardFilePath,
                     cardHashCode = u.CardHashCode,
                     cardID = u.CardID,
                     cardTitle = u.CardTitle
                 });

    if (valuetake == null && valueskip == null) {
        int take = 5;

        var cardlist = query.Take(take);

        return View(cardlist);
    }
    else {
        int skip = Convert.ToInt32(valueskip);
        int take = Convert.ToInt32(valuetake);

        var cardlist = query.Skip(skip).Take(take);

        return PartialView("FunHome", cardlist);
    }
}

<script type="text/javascript">
    $(function () {
        var value = 0;
        function IncreasedValue() {
            value += 10;
            return value;
        }
        $(window).scroll(function () {
            if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
                var currentValue = value;
                $.ajax({
                    url: '/Home/FunHome/?valuetake=' + IncreasedValue() + '&valueskip=' + currentValue,
                    type: 'GET',
                    datatype: 'HTML',
                    success: function (data) {

                        $('#funhome-partial').append(data);

                    }
                });
            }
        });
    });
</script>