Copied to clipboard

Flag this post as spam?

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


  • Sowndar M 50 posts 124 karma points
    Apr 08, 2019 @ 20:03
    Sowndar M
    0

    Filter the post based on dropdown tags

    @using ContentModels = Umbraco.Web.PublishedModels;
    @using Umbraco.Web;
    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{
        var startNodeId = Model.MacroParameters["startNodeId"] != null ? Model.MacroParameters["startNodeId"] : Model.Content.Id;
    
    
        var numberOfPosts = 3;
        if (Model.MacroParameters["numberOfPosts"] != null)
        {
            int.TryParse((string)Model.MacroParameters["numberOfPosts"], out numberOfPosts);
        }
    
    
    }
    @if (startNodeId != null)
    {
        @* Get the starting page *@
        var startNode = Umbraco.Content(startNodeId);
    
        if (startNode == null)
        {
            <div class="blogposts">
                <h1>There are no posts at this time, try again later.</h1>
            </div>
    
            return;
        }
    
        //Gets all blogposts to calculate pages
        var blogposts = startNode.Children.OrderBy(x => x.CreateDate).ToList();
        var pageCount = (int)Math.Ceiling((double)blogposts.Count / (double)numberOfPosts);
        //gets the page from the querystring and sets it to one if it is out of range
        var page = 1;
        if (!string.IsNullOrEmpty(Request.QueryString["page"]))
        {
            int.TryParse(Request.QueryString["page"], out page);
            if (page <= 0 || page > pageCount)
            {
                page = 1;
            }
        }
        //Gets the blogposts for the current page
        var pagedBlogposts = blogposts.Skip((page - 1) * numberOfPosts).Take(numberOfPosts).ToList();
    
    
        List<string> categories = new List<string>();
    
        //tes**************************************
        List<ContentModels.Blogpost> categorized_posts = new List<ContentModels.Blogpost>();
        var category = "All1";
        if (!string.IsNullOrEmpty(Request.QueryString["Categories"]))
        {
            category = Request.QueryString["selected"];
    
        }
    
    
    
    
        if (category == "All")
        {
            foreach (ContentModels.Blogpost articles in blogposts)
            {
                categorized_posts.Add(articles);
            }
        }
        else
        {
            foreach (ContentModels.Blogpost articles in blogposts)
            {
    
    
    
                if(articles.Categories )
                {
    
    
    
                }
    
            }
        }
    
        pageCount = (int)Math.Ceiling((double)categorized_posts.Count / (double)numberOfPosts);
        <section class="tag-cat">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
    
                    </div>
                    <div class="col-md-7">
                        @foreach (ContentModels.Blogpost post in pagedBlogposts)
                        {
                            foreach (var item in post.Categories)
                            {
                                categories.Add(item);
                            }
                        }
    
    
                        <div class="form-group">
                            @*<label for="sel1">Select list:</label>*@
                            <select class="form-control target " id="sel1">
                                @{
    
                                    IEnumerable<string> dcategories = categories.Distinct();
                                    <option value="All">All</option>
                                    foreach (var cat_list in dcategories)
                                    {
                                        <option value="@cat_list">@cat_list</option>
    
                                    }
                                }
                            </select>
                        </div>
    
                    </div>
                </div>
    
            </div>
        </section>
    
        if (pagedBlogposts.Count > 0)
        {
            <section class="section py-5">
    
                <div class="container">
    
                    <div class="row">
    
    
                        @foreach (ContentModels.Blogpost post in pagedBlogposts)
                        {
                            var contentImage = post.BlogPostImage != null ? post.BlogPostImage.Url : null;
                            <div class="col-md-4 mb-3">
                                <div class="blog-item-cover">
    
                                    @if (contentImage != null)
                                    {
    
                                        <img alt="@post.BlogPostImage.Name" class="img-fluid " src="@post.BlogPostImage.Url" />
                                    }
                                    <div class="content-cover">
                                        <a href="@post.Url" class="blogpost">
                                            <h6 class="blogpost-title p-3 m-0">@post.PageTitle</h6>
                                        </a>
                                        <div class="d-flex pl-3 my-2">
                                            <div class="blogpost-date mr-auto d-flex align-content-center flex-wrap">@post.CreateDate.ToString("MMMM dd, yyyy")</div>
                                            <div class=" social-share">
                                                <ul class="social-share-blog">
                                                    <li>
                                                        <a class="face-book bg-cover" href="https://www.facebook.com/sharer/[email protected]" target="_blank"></a>
                                                    </li>
                                                    <li>
                                                        <a class="twiiter bg-cover" href="https://twitter.com/[email protected]" target="_blank"></a>
                                                    </li>
                                                    <li>
                                                        <a class="linked bg-cover" href="https://www.linkedin.com/shareArticle?mini=true&[email protected]" target="_blank"></a>
                                                    </li>
                                                </ul>
    
                                            </div>
                                            <a href="@post.Url" class="blogpost-link d-flex align-content-center flex-wrap">
                                                <img src="~/Images/arrow-pointing-to-right.svg" />
                                            </a>
    
    
                                            @*<div class="ml-auto p-2 redirect-link">
                                                    <a href="@post.Url" class="blogpost">
                                                        <img src="~/Images/right.svg" />
                                                    </a>
                                                </div>*@
                                        </div>
                                    </div>
    
    
                                </div>
                            </div>
    
                        }
    
                    </div>
    
                </div>
    
            </section>
    
    
    
        }
    
        if (blogposts.Count > numberOfPosts)
        {
    
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-end">
                    @if (page <= 1)
                    {
    
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                        </li>
                    }
                    else
                    {
                        <li class="page-item">
                            <a class="page-link nav-link nav-link--black" href="@(Model.Content.Url + "?page=" + (page - 1))">Prev</a>
                        </li>
    
                    }
    
                    @for (int i = 1; i <= pageCount; i++)
                    {
                        <li class="page-item"><a class="nav-link page-link nav-link--black @(page == i ? " nav-link--active" : null)" href="@(Model.Content.Url + "?page=" + i)">@i</a></li>
    
                    }
    
                    @if (page == pageCount)
                    {
    
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-disabled="true">Next</a>
                        </li>
    
                    }
                    else
                    {
                        <li class="page-item">
                            <a class="nav-link page-link nav-link--black" href="@(Model.Content.Url + "?page=" + (page + 1))">Next</a>
                        </li>
    
                    }
    
    
    
                </ul>
            </nav>
    
        }
    }
    
    
    
    
    <script>
    
                $(".target")
                    .change(function () {
                        var str = "";
                        $("select option:selected").each(function () {
                            str += $(this).text() + " ";
                        });
                        // CHANGE URL
                        url = "?selected=" + str;
                        window.location.href = url;
                    })
            </script>
    

    The drop down show the number of tags and The Url change base on select http://localhost:62802/blog?selected=demo

    I want to filter the post base on each select. kindly check the above code which I have tried

    Right now it show all the blog post with pagination. I want to show the post based on filter with pagination

Please Sign in or register to post replies

Write your reply to:

Draft