Copied to clipboard

Flag this post as spam?

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


  • Leonardo Moura 21 posts 90 karma points
    Feb 16, 2018 @ 15:10
    Leonardo Moura
    0

    Creating Paging and Alphabetical Sort with Razor

    Hi guys,

    I cooked my head to find a good solution for it, and finally, I can breathe after finishing. So, I would like to share with you my solution. Paging and Alphabetical Sort using only Razor and Umbraco API.

    I hope that it could help you be more inspired.

    @{
    string letter = !string.IsNullOrEmpty(Request.QueryString["letter"]) ? Request.QueryString["letter"] : "#,1,2,3,4,5,6,7,8,9,0";
    char l;
    
    
    if(!string.IsNullOrEmpty(letter)){
    
    
            var selection = Model.Content.Site().FirstChild("main").FirstChild("news").Children()
                            .Where(x => x.IsVisible() &&  x.GetPropertyValue<string>("newsName").Substring(0,1)
                            .ContainsAny(letter)
                            .OrderBy("Name");
    
            var number = selection.Count();
    
            if(number > 0){                 
    
                        // Start Paging - Setting basical values
                        var pageSize = 20;
    
                        var page = 1; int.TryParse(Request.QueryString["page"], out page);
    
                        var totalPages = (int)Math.Ceiling((double)number / (double)pageSize);
    
                        if(page > totalPages){
                            page = totalPages;
                        }
                        else if(page < 1){
                            page = 1;
                        }
                        <!-- Start Alphabetical List  -->
                        <div class="col-md-offset-1">
                            <ul class="pagination">
                                <li class="page-item">
                                        <a href="/news/">0-9</a>
                                </li>
                                         @{
                                              for(l='A'; l<='Z';++l){
                                                  <li class="page-item @(l.ToString() == letter ? "active" : string.Empty)">
                                                  <a href="?letter=@l" class="page-link">@l</a>
                                                   </li>
                                              }
                                         }
                            </ul>  
                        </div>    
                        <!-- End Alphabetical List -->                
    
                        <!-- Start RENDER the News -->  
                        @foreach(var item in selection.Skip((page - 1) * pageSize).Take(pageSize)){ 
    
                            if(item.GetPropertyValue<bool>("newsStatus")){
                                    <li class="col-sm-6">
                                        <a href="@item.Url" > 
                                            <div class="newsBox">
                                                <div class="newsDescription">
                                                    <span class="p">@item.GetPropertyValue("newsDescription")</span>
                                                </div>
                                                <div class="boxdealer2desc">
                                                    <span class="h4">Posted on:</span>
                                                    <span class="p">@Convert.ToDateTime(item.GetPropertyValue("postDate")).ToString("MM/yyyy")</span>
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </a>
                                    </li>       
    
                            }
    
                        }
                        <!-- End RENDER the News -->    
                        <!-- Start Pagination -->           
                        <div class="col-md-6 col-md-offset-4">
                            @{
    
                               if(totalPages > 1){
                                   <nav class="pagination">
                                       <ul class="pagination">
                                           @if(page > 1){
                                               <li class="page-item"><a href="?letter=@letter&page=@(page-1)" class="page-link">Prev</a></li>
                                           }
                                           @for (int p = 1; p < totalPages +1; p++){
                                               <li class="page-item @(p == page ? "active" : string.Empty)">
                                                   <a href="?letter=@letter&page=@p" class="page-link">@p</a>
                                               </li>
                                           }
                                           @if(page < totalPages){
                                               <li class="page-item"><a href="?letter=@letter&page=@(page+1)" class="page-link">Next</a></li>
                                           }
                                       </ul>
                                   </nav>
                                }
                                //
                            }
                        </div>
                        <!-- End Pagination --> 
            } else {
                        <li class="col-sm-6">
                                <div class="newsANY">
                                    No Results have been Found!
                                    <div class="clearfix"></div>
                                </div>
                        </li>
    
            }
    
    } else {
                        <li class="col-sm-6">
                                <div class="newsANY">
                                    No Results have been Found!
                                    <div class="clearfix"></div>
                                </div>
                        </li>   
    }
    

    }

    Problems, concerns or improvements, please let me know will be a pleasure collaborate and support you.

    Cheers, Leonardo Moura

  • Streety 358 posts 568 karma points
    Feb 16, 2018 @ 19:12
    Streety
    0

    I think from a manageability viewpoint, your code is hard to read and debug.

    As a suggestion you may want to field out some of the logic to a supporting helper class or even create some helpers on the view.

    at least that way you can separate your code and HTML a bit more.

    https://docs.microsoft.com/en-us/aspnet/web-pages/overview/ui-layouts-and-themes/creating-and-using-a-helper-in-an-aspnet-web-pages-site

    Mixing so much razor and HTML can be a headache and harder to locate errors.

  • Leonardo Moura 21 posts 90 karma points
    Feb 16, 2018 @ 19:58
    Leonardo Moura
    0

    Dear Streety,

    So, I disagree with you.

    The Razor well used can be an advantage and it was created to be used together with HTML.

    The code is simple, easy to use, ease to customize, it is using only Razor and HTML. Maybe you see the code hard to understand because of this dark background.

    However I can understand you point of view also.

    I think like this: "different solutions different approaches".

    Anyway, this minimalist approach for me works great. Maybe we have different points of view, but, I created and tested this code and it is fast and effective.

    Thank you for your suggestion I gonna study it.

Please Sign in or register to post replies

Write your reply to:

Draft