Показывать теги на их собственной вкладке

Я создаю систему тегов на своем сайте. Пока все отлично работает. Но теперь я хочу создать страницу, на которой все мои теги отображаются на отдельной вкладке, как у вас на странице портфолио.

Пример: http://www.don-zalmrol.be/tags?tag=Electronics

На моей странице уже отображаются теги для определенного тега на его собственной вкладке (например, электроника), но, как вы можете догадаться, я также хочу заполнить другие теги на соответствующих вкладках.

Короче говоря, вы получаете представление, которое отображает выбранный вами тег, но на той же странице вы можете видеть и другие.

Кто-нибудь знает, как я могу это сделать? Я не думаю, что я далек от решения, поскольку я уже могу загружать проекты для определенных тегов на своей вкладке. Теперь мне нужно только заполнить оставшиеся вкладки тегами!

Спасибо!

Это мой код до сих пор:

http://pastebin.com/jwGW0NKZ

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{ 
    var portfolio = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text); 
    var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text); 
    string tag = Request.QueryString["tag"];

    if (!tag.IsNullOrWhiteSpace())
    {
        var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);

        if (publishedContent.Count() > 0)
        {
            @* Show title *@
            <div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                <center>
                    <div>
                        <i class="fa fa-tags"></i>
                    </div>

                    <br />

                    <div class="media-body">
                        <h2>Tags</h2>
                        <p>Browse content by tag</p>
                    </div>
                </center>

                <br />

            </div>


            @* Show tag titles in tabs *@
            <ul class="portfolio-filter text-center">

                <li><a class="btn btn-default" href="#" data-filter="*">All tags</a></li>

                @foreach (var tags in tagList)
                {
                    <!-- Create a selected tag -->
                    if(@tags.Text == @tag)
                    {
                        <li><a class="btn btn-default active" href="#" data-filter=".@tag">@tag</a></li>
                    }

                    @* Show all other tags *@
                    else
                    {
                        <li><a class="btn btn-default" href="#" data-filter="[email protected]">@tags.Text</a></li>
                    }
                }

            </ul>


            <div class="row">
                <div class="portfolio-items">

                    @* Start picture content *@
                    @foreach (var tags in tagList)
                    {
                        @* Put selected tag in the right tag tab *@
                        if(@tags.Text == @tag)
                        {
                            @* Show tag content *@
                            foreach (var item in publishedContent.OrderByDescending(i => i.CreateDate))
                            {                   
                                <div class='portfolio-item @tag col-xs-12 col-sm-4 col-md-3'>
                                    <div class="recent-work-wrap">

                                        @* IF the project has a picture *@
                                        @if(item.HasValue("pictureOfTheProject"))
                                        {
                                            var featureImage = Umbraco.TypedMedia((int)item.GetPropertyValue("pictureOfTheProject")); 
                                            <img class="img-responsive" src="@featureImage.GetCropUrl(250, 250)" alt='@item.GetPropertyValue("titleOfTheProject")' /> 

                                            <div class="overlay">
                                                <div class="recent-work-inner">

                                                    <h3><a href="@item.Url">@item.GetPropertyValue("titleOfTheProject")</a></h3>

                                                    <a class="preview" href="@featureImage.GetCropUrl(250, 250)" rel="prettyPhoto">
                                                        <i class="fa fa-eye"></i> View
                                                    </a>
                                                </div>
                                            </div>
                                        }

                                        @* Else when the project doesnt have a picture, show default one *@
                                        else
                                        {
                                            var noImage = "http://www.don-zalmrol.be/media/1440/no_image_available.png";
                                            <img class="img-responsive" src="@noImage.GetCropUrl(250, 250)" alt="No image" />

                                            <div class="overlay">
                                                <div class="recent-work-inner">

                                                    <h3><a href="@item.Url">@item.GetPropertyValue("titleOfTheProject")</a></h3>

                                                    <a class="preview" href="@noImage.GetCropUrl(250, 250)" rel="prettyPhoto">
                                                        <i class="fa fa-eye"></i> View
                                                    </a>

                                                </div>
                                            </div>
                                        }

                                    </div>  
                                </div>
                            }
                        }

                        @* Put the other tags under there own tab *@
                        else
                        {

                        }
                    }
                    @* End dynamic tags *@

                </div>
            </div>
        }

        @* No content matching the tag? *@
        else
        {
            <p>There isn't any content matching that tag.</p>

            @Html.Partial("TagList")
        }
    }

    @* Show the tag list with amount *@
    else
    {
        @Html.Partial("TagList")
    }

}

РЕДАКТИРОВАТЬ 27-03-2016

Итак, теперь я знаю, что мне нужно поиграть с моим запросом тега или использовать IEnumerable. Но я не могу понять, как это сделать, не нарушая код...

@* Получить все теги и упорядочить их по именам *@ var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);

@* Получить запрошенный тег *@ string tag = Request.QueryString["tag"];

@* Показать весь контент по запрошенному тегу *@ var publishContent = Umbraco.TagQuery.GetContentByTag(tag);

Выше приведены фрагменты кода, которые перечисляют все теги, которые у меня есть в var, получают имя из URL-адреса (например, Electronics) и тот, который затем отображает весь контент, соответствующий указанному запрошенному тегу.

Итак, вкратце, мне нужно изменить последнюю часть TagQuery, чтобы перечислить все содержимое, имеющее тег, а затем отфильтровать его по строке запроса, чтобы отобразить их в своей собственной категории.

Но как вывести список всего содержимого тегов?

Ваше здоровье,

Дон


person Don Zalmrol    schedule 16.03.2016    source источник


Ответы (1)


Ваша проблема находится в строке 76 pastebin, где вы перебираете опубликованный контент, который уже отфильтрован по выбранному тегу. По этой причине в шаблон записывается только содержимое с выбранным тегом.

Что вам нужно сделать, так это использовать цикл в строке 70, где вы перебираете все теги. Плагин jQuery, который вы используете, будет обрабатывать фильтрацию с помощью класса CSS, который вы добавляете в строке 78. Вы можете избавиться от цикла в строке 76.

Для ясности я бы также изменил

@foreach (var tags in tagList)

to

@foreach (var item in tagList)

поскольку foreach создает один тег, а не несколько «тегов», как намекает ваш код. У этого есть дополнительный бонус, позволяющий вам сохранить остальную часть вашего кода без изменений после удаления цикла в строке 76.

person chrisjsherm    schedule 17.03.2016
comment
Привет, Крис, спасибо, что вернулся ко мне. Я пытался это сделать, но теперь получаю сообщение об ошибке в строке 79. pastebin.com/SyqQ6Z70 Это заявляя следующее CS1928: «Umbraco.Web.Models.TagModel» не содержит определения для «HasValue», а лучшая перегрузка метода расширения «Umbraco.Web.PublishedContentExtensions.HasValue (Umbraco.Core.Models.IPublishedContent, string)» имеет некоторые неверные аргументы - person Don Zalmrol; 17.03.2016
comment
@DonZalmrol Если вы хотите использовать эти методы, либо расширьте класс TagModel, добавив их, либо приведите коллекцию к IEnumerable‹IPublishedContent› - person chrisjsherm; 19.03.2016
comment
Как мне лучше всего использовать этот IEnumerable‹IPublishedContent› в моем коде? - person Don Zalmrol; 19.03.2016