password22
@password22

Правильный Infinite Scroll в asp.net mvc, как реализовать?

Добрый день. Я пытаюсь сделать хорошую бесконечную прокрутку, в плане того, чтобы она соответствовала рекомендациям гугл. Здесь все подробно о том, каким должен быть infinite scroll
https://developers.google.com/search/blog/2014/02/...

Там в статье есть ссылка на уже готовую библиотеку, с которой я, если честно, как-то не смог разобраться

Поэтому я пытаюсь сделать его без всяких плагинов. Вроде получается, но две проблемы:
1. Почему-то данные загружаются в тот момент, когда я скролю до самого верха страницы, а не наоборот вниз до конца
2. Как изменять url по типу рекомендация гугла http//bla.com/posts?id=1, где id будут меняться при прокручивании страницы

JavaScript
<script src="~/lib/jquery/dist/jquery.min.js"></script>

    <script type="text/javascript">

        var pageSize = 5;
        var pageIndex = 0;

        $(document).ready(function () {
            GetData();

            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                    GetData();
                }
            });
        });

        function GetData() {
            $.ajax({
                type: 'GET',
                url: '/Test/GetData',
                data: { "pageindex": pageIndex, "pagesize": pageSize },
                dataType: 'json',
                success: function (data) {
                    if (data != null) {
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2 style='margin: 9em 0;'>" +
                                data[i].title + "</h2>");
                        }
                        pageIndex++;
                    }
                },
                beforeSend: function () {
                    $("#progress").show();
                },
                complete: function () {
                    $("#progress").hide();
                },
                error: function () {
                    alert("Error while retrieving data!");
                }
            });
        }
    </script>


Html
<h1>Тестовая страница</h1>



<div id="container"> </div>
<div id="progress" style="display: none">
    <img src="/img/loading.gif" alt="" />
</div>


C# (controller)
public object SerializerSettings { get; set; }
        public ActionResult GetData(int pageIndex, int pageSize)
        {
            JsonSerializerSettings jsonSerializerSettings = new JsonSerializerSettings()
            {
                ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };
            var sqlArticles = @"SELECT * FROM Articles";
            using (var connection = new SqlConnection(CONNECTION_STRING))
            {
                var articles = connection.Query<ArticleModel>(sqlArticles);
                var result = articles
                                .Skip(pageIndex * pageSize)
                                .Take(pageSize);

                var a = new JsonSerializerOptions();
                return new JsonResult(result, jsonSerializerSettings);
            }

        }


Буду рад любой помощи: и помощь в моих нерешенных задачах и возможно каким-то готовым решениям или новым идеям. Спасибо
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы