Hello

Would an Umbraco API controller work for you? https://our.umbraco.com/Documentation/Reference/Routing/WebApi/

You could create an AJAX request to the API call to get the information you require.

I do not have any code for an infinite scroll facility, but i have used Umbraco API controller before to get information i require to the view.

Yes definitely take a look at WEBAPI,

Let's say X has property name, intro and url

Step 1, define your model (/models/NewsItem.cs)

 public class NewsItem
    {
        public string Url { get; set; }
        public string Name { get; set; }
        public string Intro { get; set; }

    }

Step 2: create (strongly typed) partial view (/views/partials/NewsItem.cshtml)

@model YourProjectName.Models.NewsItem


<div class="item">
    <a href="@Model.Url">
        <div class="text">
            <h3>
                @Model.Name
            </h3>

        </div>
    </a>
</div>

Oops got posted to quick, was still writing... part 2 coming up

Step 3, add another partial view that will list newsitems (not a single one but a collection (/views/partials/NewsItems.cshtml)

@model IEnumerable<NewsItem>

@if (Model.Any())
{
<div class="row">
    @foreach (var item in Model)
    {
        @Html.Partial("NieuwsItem", item)

    }
</div>
}

Step 4: add a surface controller that will handle the rendering of more news items (/controllers/MoreNewsItemsController.cs)

 public class MoreNewsItemsController: SurfaceController
{
    public ActionResult LoadMoreNewsItems(int pageId, int ItemsPerPage,  int page)
    {
      //fetch the news items here and cast them to the model
      var newsItems = ...;
      return PartialView("~/Views/Partials/NewsItems.cshtml", newsItems);

then on the page where you output the news, you'll first output n number of items and then lazy load the rest with js

here is a snippet to get you started but you'll need to finetune it

 <script>

    var lazyloadPage = 2,
        lazyloadHtml = '';

    function lazyload() {

        var requestData = {

            pageId: @Model.Content.Id,
            itemsPerPage: 6,
            page: lazyloadPage
        }

        $.get('/umbraco/surface/MoreNewsItems/LoadMoreNewsItems', requestData, function (data) {

            var newData = data.trim();

            if (newData.length > 0) {

                $('#search-load-more').css('display', 'inline-block');

            } else {

                $('#search-load-more').css('display', 'none');
            }

            lazyloadHtml = newData;
        });
    }

    $('#search-load-more').click(function (event) {

        event.preventDefault();

        setTimeout(function () {

            $('#search-result-wrapper').append(lazyloadHtml).find('.load-more-step').removeClass('load-more-step').fadeIn(200);
            lazyloadPage++;
            lazyload(lazyloadPage);
        }, 0);
    });

    lazyload(lazyloadPage);




</script>

Hope this makes sense :) you'll also need jQuery since that is used in the js....

The snippet basicly lazy loads the next n items on page load and then when a button is clicked is shows them plus lazy loads the next items

I'll try to wrap this in a exampe project but currently you'll have to do it with this

I have the same requirement. Would be good to see a working example.

is working on a reply...