Copied to clipboard

Flag this post as spam?

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


  • Brett Fullam 119 posts 629 karma points
    Jun 08, 2017 @ 13:34
    Brett Fullam
    0

    Really, ... PagedList.Mvc ... no takers on this topic? I don't blame you ... I broke my site TWICE now trying to implement this

    YEAH ... good thing I'm all over version control or I'd be completely screwed by now. I've broken my site TWICE trying to implement this feature.

    I tried working through a couple of tutorials creating a controller, model and view but can't get them to work (or not break my site ha ha ha).

    This tutorial (from 2017) uses a package, PagedList.Mvc, that's outdated and he provides the bare minimum for creating the controller, model and view (including their contents ... I believe those are incomplete as well). here's a link to Jon's the tutorial

    This other tutorial (from 2016), by Paul Seal which is pretty advanced, is where that error appeared and broke my site ... the back office was wrecked ... some conflict with angular.js I believe. here's a link to Paul's tutorial

    So ... I'm at a loss ... and unfortunately under deadline (aren't we all).

    Does anyone know of any other resources for building pagedlist features in umbraco ...?

    Thank in advance for your help.

  • Gordon Saxby 1444 posts 1855 karma points
    Jun 08, 2017 @ 14:44
    Gordon Saxby
    0

    Hi Brett,

    I am using X.PagedList.Mvc - version 5.1.0.5000 (there is a reason why, but can't remember right now, sorry!) Edit - remember now, next version targetted .Net 4.6 which I'm not using.

    I have a paged list property on my View Model, e.g.

        public IPagedList<Transaction> PageOfTransactions { get; set; }
    

    That gets populated in the controller like:

            statementViewModel.PageOfTransactions = statementViewModel.Transactions.ToPagedList(pageNumber, transactionsToDisplay);
    

    In the view, I loop over the list of transactions to diisplay them:

                    @foreach (var transaction in Model.PageOfTransactions)
    

    And the actual pager is created with this code (looks horrible!):

                        @Html.PagedListPager(Model.PageOfTransactions, page => Url.Action("Statement", new { page }), new PagedListRenderOptions
                        {
                            DisplayLinkToFirstPage = PagedListDisplayMode.Never,
                            DisplayLinkToPreviousPage = PagedListDisplayMode.IfNeeded,
                            DisplayLinkToNextPage = PagedListDisplayMode.IfNeeded,
                            DisplayLinkToLastPage = PagedListDisplayMode.Never,
                            ClassToApplyToFirstListItemInPager = "pagination-previous",
                            LinkToPreviousPageFormat = umbraco.GetDictionaryValue("Account.Previous"),
                            ClassToApplyToLastListItemInPager = "pagination-next",
                            LinkToNextPageFormat = umbraco.GetDictionaryValue("Account.Next"),
                            UlElementClasses = new List<string> { "pagination" },
                            ContainerDivClasses = new List<string> { "medium-8", "columns", "small-pagination-centered" }
                        })
    

    I think that's pretty much everything, sorry it's not a full-on tutorial. Hope that helps.

  • Brett Fullam 119 posts 629 karma points
    Jun 08, 2017 @ 14:55
    Brett Fullam
    0

    Thanks Gordon ... I really appreciate the help (especially the confirmation of the package and version you are using).

    I'll go back over what I do have, and use your information here as a reference. Thanks again!

  • Gordon Saxby 1444 posts 1855 karma points
    Jun 08, 2017 @ 15:03
    Gordon Saxby
    1

    Yes, I started with PageList.Mvc until I saw the message on the project website - https://github.com/TroyGoode/PagedList - saying that it was no longer in development.

    There's some basic example code on the X.PagedList GitHub page too - https://github.com/dncuug/X.PagedList

  • Brett Fullam 119 posts 629 karma points
    Jun 08, 2017 @ 15:26
    Brett Fullam
    0

    Excellent ...! Reviewing the page on github now, thanks Gordon.

  • Brett Fullam 119 posts 629 karma points
    Jun 16, 2017 @ 19:05
    Brett Fullam
    0

    OK ... so, I couldn't get any of the previous pagedlist items to work for me.

    HOWEVER, I did get this to work ... creates a paged list with bootstrap pagedlist controls.

    Here's the code from a partial view I created should anyone need a solution that doesn't require a surfaceController-Model-View combination (although I'm sure that these are "cleaner" and more "elegant" solutions than what's listed here):

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    
    @{
        var pageSize = 6;
        var page = 1; 
        int.TryParse(Request.QueryString["page"], out page);
    
    
        var items = CurrentPage.Site().FirstChild("articlesMain").Children("articlesItem").Where("Visible").OrderBy("CreateDate descending");
    
        var totalPages = (int)Math.Ceiling((double)items.Count() / (double)pageSize);
    
        if (page > totalPages)
        {
            page = totalPages;
        }
        else if (page < 1)
        {
            page = 1;
        }
    
    
    }
    
    
    
    <div class="container-fluid">
    
        <div class="row">
    
            <div class="container-fluid">
        <!-- START for testing code-pagination functionality -->
        <h1>Testing pagination</h1>
    
        <p>Page size = @pageSize</p>
        <p>page = @page</p>
        <p>items = @items.ToList()</p>
        <p>total page = @totalPages</p>
        <p></p>
    <!-- END for testing code-pagination functionality -->
        <div class="row" style="margin-top:25px;">
    
        @foreach (var item in items.Skip((page - 1) * pageSize).Take(pageSize))
        {
            <div class="col-md-4" style="min-height: 540px;margin-top:15px;margin-bottom:15px;padding:10px;">
        @{
            var image = item;
            if(item.HasValue("newsImage"))
        {
            <img class="img-responsive" src="@image.newsImage.Url" />
        }
        }
    
                        <h3>@item.Name</h3>
                        <h4>@item.NewsSubtitle</h4>
                        <p>@Umbraco.Truncate(@item.NewsBodyText,150) <a class="" href="@item.Url"><span class="glyphicon glyphicon-chevron-right"></span><span class="popHorasBold"> Ler Mais</span></a></p>
    
    
    
    
            <a href="@item.Url" class="btn btn-default btn-lg btn-danger"><span class="glyphicon glyphicon-chevron-right"></span> Ler Mais</a>
    
            <br />
            </div>
        }
    
        </div>
    
        @if (totalPages > 1)
        {
            <ul class="pagination">
    
                @if (page > 1)
                {
                    <li class="previous"><a href="?page=@(page-1)">Prev</a></li>
                }
    
                @for (int p = 1; p < totalPages + 1; p++)
                {
                    var active = (p == page) ? "active" : string.Empty;
    
                    <li class="@active"><a href="?page=@p">@p</a></li>
                }
                @if (page < items.Count() && page != totalPages)
                {
                    <li class="next"><a href="?page=@(page+1)">Next</a></li>
                }
    
            </ul>
        }
    </div>
    
        </div></div>
    

    Appreciate the help getting this far ... I hope this helps someone else.

Please Sign in or register to post replies

Write your reply to:

Draft