Question

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

场景 -

我的视图页面上有大约100张要渲染的图片。对于每个滚动到底部的请求，我通过jQuery发送LINQ值 -

  <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

Skip / Take方法应始终按此顺序使用：Skip，然后Take用于分页。
Skip(0)毫无意义......
您应该只返回查询中的新元素并将其附加到您的网页，而不是替换整个HTML内容。在您的javascript代码中使用append()代替html()。
您可以在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>

接下来不要跳过以前的LINQ c＃

1 个答案: