Nested content, news detail , bews archive, search page - FadiZahhar/umbraco8showandtell GitHub Wiki

📰 Umbraco 8 Tutorial: Nested Content, News Article Page, News Listing, and Search Page

Step 1: Set Up Document Types in Umbraco

A. News Article DocType

Create a Document Type: "News Article"

  • title: Textstring

  • summary: Textbox

  • bodyText: Richtext Editor

  • publishDate: Date Picker

  • thumbnail: Media Picker

  • relatedLinks (optional, Nested Content, see below)

B. News Listing DocType

Create a Document Type: "News"

  • No properties required, unless you want an intro, banner, etc.

  • Under Permissions, allow "News Article" as a child.

C. (Optional) Nested Content Example

Property: relatedLinks

  • Type: Nested Content

  • Element Type: "Link"

    • caption: Textstring

    • url: Url Picker

This allows editors to add a repeatable list of links per article.

Step 2: Implement Nested Content in a View

Suppose you have a Nested Content property alias relatedLinks.

In your NewsArticle.cshtml view:

@{
    var relatedLinks = Model.Value<IEnumerable<IPublishedElement>>("relatedLinks");
}
@if (relatedLinks != null && relatedLinks.Any())
{
    <section class="related-links">
        <h3>Related Links</h3>
        <ul>
        @foreach(var link in relatedLinks)
        {
            <li>
                <a href="@link.Value("url")" target="_blank">
                    @link.Value("caption")
                </a>
            </li>
        }
        </ul>
    </section>
}

What’s happening?

  • Model.Value<IEnumerable<IPublishedElement>>("relatedLinks") fetches the Nested Content list.

  • You loop and render each as a list item.

Step 3: News Article Detail View

File: /Views/NewsArticle.cshtml

@inherits Umbraco.Web.Mvc.UmbracoViewPage

<article class="news-article">
<header>
<h1>@Model.Value("title")</h1>
<time datetime="@Model.Value<DateTime>("publishDate"):yyyy-MM-dd">
@Model.Value<DateTime>("publishDate"):dddd, MMM d, yyyy
</time>
</header>
@if (Model.HasValue("thumbnail"))
{
var thumb = Model.Value<IPublishedContent>("thumbnail");
<img src="@thumb.Url()" alt="@Model.Value("title")" class="img-fluid" />
}
<div class="news-body">
@Model.Value("bodyText")
</div>
@* Render related links via nested content *@
@{
var relatedLinks = Model.Value<IEnumerable<IPublishedElement>>("relatedLinks");
}
@if (relatedLinks != null && relatedLinks.Any())
{
<section class="related-links">
<h3>Related Links</h3>
<ul>
@foreach(var link in relatedLinks)
{
<li>
<a href="@link.Value("url")" target="_blank">
@link.Value("caption")
</a>
</li>
}
</ul>
</section>
}
</article>

Step 4: News Listing (Archive) View

File: /Views/NewsArticles.cshtml

@inherits Umbraco.Web.Mvc.UmbracoViewPage

@{
var articles = Model.Children()
.Where(x => x.ContentType.Alias == "newsArticle")
.OrderByDescending(x => x.Value<DateTime>("publishDate"));
}


<section class="news-list">
<h1>Latest News</h1>
<ul>
@foreach(var article in articles)
{
<li>
<h2><a href="@article.Url">@article.Value("title")</a></h2>
<small>@article.Value<DateTime>("publishDate"):MMM d, yyyy</small>
@if (article.HasValue("summary")) {
<p>@article.Value("summary")</p>
}
</li>
}
</ul>
</section>

Step 5: Search Page Implementation

A. Add Search SurfaceController

Create SearchController.cs in your Core project:

using System.Linq;
using System.Web.Mvc;
using Umbraco.Web.Mvc;

public class SearchController : SurfaceController
{
[HttpPost]
public ActionResult Search(string query)
{
if (string.IsNullOrWhiteSpace(query))
{
TempData["searchError"] = "Please enter a search term.";
return RedirectToCurrentUmbracoPage();
}


    var results = Umbraco.ContentAtRoot()
        .DescendantsOrSelf()
        .Where(x =&gt; x.ContentType.Alias == "newsArticle" &amp;&amp;
                    (x.Value&lt;string&gt;("title").InvariantContains(query)
                     || x.Value&lt;string&gt;("summary").InvariantContains(query)
                     || x.Value&lt;string&gt;("bodyText").InvariantContains(query)))
        .ToList();

    return PartialView("SearchResults", results);
}



}

B. Search Page View

File: /Views/Search.cshtml

@inherits Umbraco.Web.Mvc.UmbracoViewPage

@using (Html.BeginUmbracoForm("Search", "Search"))
{
<input type="text" name="query" placeholder="Search news..." class="form-control" />
<button type="submit" class="btn btn-primary">Search</button>
}


@if (TempData["searchError"] != null)
{
<div class="alert alert-danger">@TempData["searchError"]</div>
}


@Html.Action("SearchResults", "Search")

C. Partial View for Results

File: /Views/Partials/SearchResults.cshtml

@model IEnumerable<Umbraco.Core.Models.IPublishedContent>

@if (Model != null && Model.Any())
{
<ul>
@foreach(var result in Model)
{
<li>
<a href="@result.Url">@result.Value("title")</a>
<p>@result.Value("summary")</p>
</li>
}
</ul>
}
else
{
<p>No results found.</p>
}

Step 6: Link It All in Navigation

  • Add links to your News listing and Search page in your main navigation partial or layout.

Summary Table

Page DocType Alias View File Description/Notes
News Article newsArticle NewsArticle.cshtml Shows full article, nested
News Listing news NewsArticles.cshtml Loops children for archive
Search search Search.cshtml + Partial Shows search box/results
Nested Content any In NewsArticle.cshtml Related links, repeatables

Conclusion

This gives you a complete, scalable approach for nested content, news detail, news archive, and search, all following best practices for Umbraco 8.

⚠️ **GitHub.com Fallback** ⚠️