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

Question

[password22]

Добрый день. Я пытаюсь сделать хорошую бесконечную прокрутку, в плане того, чтобы она соответствовала рекомендациям гугл. Здесь все подробно о том, каким должен быть 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);
            }

        }

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

Comments

[password22]

Andrei Brizhak, все так, но под десктоп хотелось бы тоже бесконечный скролл, без нажатия на следующие страницы

И еще момент, что вы имеете ввиду под

то браузере мобилки и так все будет прикручено

?
В смысле в Syncfusion?

[password22]

Andrei Brizhak, не совсем опытный, посмотрю
Спасибо