Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kim Rasmussen 81 posts 310 karma points
    Sep 24, 2012 @ 16:00
    Kim Rasmussen
    0

    How to load more elements - for-each

    Hi Forum!

    I have this code, and I want to only show 10 elements at first, and then a 'load more'-button should load the next 10 and so on. 

    How can I do that?

    Best regards
    Kim

    @{
      var root Model.AncestorOrSelf();
      var nodes root.Descendants().Where("NodeTypeAlias == @0 and Visible""Timestamp");

      foreach (var node in nodes.OrderBy("timelineDate desc")){
                                                               
        <article class="twelve columns timelineElement element">
          <div class="elementContent">
          <name="@node.Id"></a>   
       
            <span class="date">
                @{
                  if (@node.timelineShortDate == true){
                    @node.timelineDate.ToString("yyyy")
                                 
                  }else {
                         
                    @node.timelineDate.ToString("dd.MM.yyyy")

                  }
                }
            </span>
            <h1><href="@node.Url" title="@node.Name">@Html.Raw(node.pageTitle)</a></h1>
            <class="lead">@node.timelineTeaser</p>
            <href="@node.Url" title="@node.Name" class="readmore">&#9658; Læs mere</a>
            
            
            @if (@node.HasValue("timelinePhoto"){
              dynamic mediaItems @node.timelinePhoto.mediaItem;
                                                   
              <div class="elementImage">                                     
                <href="@node.Url" title="@node.Name">
        
                  @if (mediaItems.Count(!= 0)
                  {
                    foreach (var item in mediaItems)
                    {
                      var image item.Image;
                      <img data-original="@image.umbracoFile" src="/css/images/lazy.gif" class="lazy" alt="@image.nodeName" /
                      <noscript><img src="@image.umbracoFile" /></noscript>               
                    }
                   
                  }
                </a>
              </div>
            }
          </div>

        </article
              
      }
    }
  • Funka! 398 posts 660 karma points
    Sep 24, 2012 @ 19:28
    Funka!
    0

    Hi Kim,

    Take a look at the Take(int) and Skip(int) extension methods... For example, here's how to get the third page of results if we have 10 per page. (Note, you can also use Count() to make sure you have enough nodes before trying to generate this, and also to know whether you should really build that "Load More" button...)

    foreach(varnode innodes.OrderBy("timelineDate desc").Take(10).Skip(20)) ...

    Best of luck to you!

  • Funka! 398 posts 660 karma points
    Sep 24, 2012 @ 19:30
    Funka!
    0

    Whoops, sorry, had those backwards i think. You would likely want to skip before you took!  Anyhow, good luck!

  • Kim Rasmussen 81 posts 310 karma points
    Sep 28, 2012 @ 12:16
    Kim Rasmussen
    0

    Hi Funka!

    Thanks!

    Okay, then I just have to figure out the next step - a way of building that button ... should I use some querystring reading?

    Best regards! 

  • Rabea 34 posts 186 karma points
    May 16, 2019 @ 07:40
    Rabea
    0

    @Kim were you able to resolve this as i am also facing the same requirements

Please Sign in or register to post replies

Write your reply to:

Draft