Yesterday I explained how to display the Umbraco tag data type, but what if you want to get all content that matches a given tag? In this post I’ll show you how to implement this feature so the anchor tags from the last post respond intelligently.
In Umbraco back office, select Settings from the main menu. Within Settings, create a new partial view named TagList. In this partial we’ll grab all tags associated with our content and display them on the page. This view will appear whenever visitors navigate to our template without searching for a tag or when content matching a tag search is not found.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
var tagList = Umbraco.TagQuery.GetAllContentTags()
.OrderBy(t => t.Text);
}
<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-4">
@foreach (var tag in tagList)
{
<li>
<a href="/[email protected]">
@tag.Text (@tag.NodeCount)
</a>
</li>
}
</ul>Next, in the Settings view, create another partial view named TagContentList. In this partial we grab the tag parameter from the URL’s query string and search for matching content. When Umbraco finds matching content, it will display the headline property along with its create date and a link to the content.
The headline property is a required property I defined in a master document type to apply to all child documents. You will need to change this property name to a property that exists on your tagged documents if you haven’t implemented the headline property.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
string tag = Request.QueryString["tag"];
if (!tag.IsNullOrWhiteSpace())
{
var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);
if (publishedContent.Count() > 0)
{
foreach (var item in publishedContent
.OrderByDescending(i => i.CreateDate))
{
<div class="row">
<div class="large-8 large-centered columns">
<section class="text-center">
<a href="@item.Url">
<h2>
@item.GetPropertyValue("Headline")
</h2>
</a>
<span>
@item.CreateDate
</span>
</section>
</div>
</div>
}
}
else
{
<div class="row">
<div class="small-12 columns">
<p>
There isn't any content matching that tag.
</p>
</div>
</div>
@Html.CachedPartial("TagList", Model.Content, 86400000)
}
}
else
{
@Html.CachedPartial("TagList", Model.Content, 86400000)
}
}Finally, we need to add a template to display the partial views we created above. In Settings, add a new template named Tags.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "\_Layout.cshtml";
}
<header>
<div class="row">
<div class="large-12 columns">
<h1>
Tags
</h1>
<h3>Browse content by tag</h3>
</div>
</div>
</header>
<div class="row">
<div class="large-12 columns">
<section class="page-container">
@Html.Partial("TagContentList", Model.Content)
</section>
</div>
</div>