locked
Creating scrolling page to load more data asp mvc RRS feed

  • Question

  • User2131089582 posted

    Hi there i'm trying to create infinite scrolling to load more data by following this tutorial https://dotnetthoughts.net/load-data-while-scrolling-page-down-with-jquery-and-asp-net-mvc/

    Below is my code that i tried 

     [HttpGet]
            public ActionResult GetData(int pageIndex = 0)
            {
                var posts = new List<Post>();
                int first = pageIndex + 1;
                int last = pageIndex + 10;
                for(int i = first; i <= last; i++)
                {
                    posts.Add(new Post()
                    {
                        id = i,
                        Created = DateTime.UtcNow,
                        Content = "Content from Database with Id" + i,
                        Title = "Title " + i
                    });
                }
    
                return Json(posts,JsonRequestBehavior.AllowGet);
            }

    and below is my view 

    @model IEnumerable<ScraBoy.Features.CMS.Blog.Post>
    @{
        ViewBag.Title = "GetData";
    }
    
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    
    <div id="container"></div>
    <div id="progress" style="display:none">
        <h4>Loading...</h4>
    </div>
    
    <div id="result">
        <div id="0" class="post"></div>
        <div id="loadMessage" style="display:none;">
            ![](~/Content/loader.gif)
        </div>
    </div>
    
    <script>
        $(function () {
            FetchDataFromServer();
            $(window).scroll(function () {
                if ($(window).scrollTop() ==
                    $(document).height() - $(window).height()) {
                    if ($('#loadMessage').css('display') == 'none') {
                        FetchDataFromServer();
                    }
                }
            });
        });
    
        function FetchDataFromServer() {
            $("#loadMessage").toggle();
            var id = $(".post:last").attr("id");
            $.ajax("/HomeBlog/GetData", {
                type: "GET",
                contentType: "application/json",
                data: { pageIndex: id },
                dataType: "json",
                success: function (data) {
                    var postsTemplate = $.templates("#posts");
                    var html = postsTemplate.render(data);
                    $(".post:last").after(html);
                    $("#loadMessage").toggle();
                },
                error: function () {
                    $("#loadMessage").toggle();
                }
            });
        }
    </script>

    But why it's return json intead view

    Sunday, December 9, 2018 3:21 PM

Answers

  • User2131089582 posted

    Sorry it's really silly question it will return json instead view cause i don't request view , i request json

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, December 9, 2018 3:44 PM