SaaS Headless CMS ASP.NET Core Razor Pages Data-Driven Breadcrumb View Component

This blog post describes a prototype ASP.NET Core razor pages view component that renders a breadcrumb based on the information architecture of the website as determined by its URL hierarchy. This post is a continuation of a series progressing an ASP.NET razor pages solution architecture using the Contentstack SaaS headless CMS.

The following post contains additional details about a top navigation component that uses the same architecture.

For a breadcrumb, we want to output a link to each ancestor of the current page and then the navigation title of the current page.

Here is the breadcrumb class.

using Microsoft.AspNetCore.Mvc;

using System.Collections.Generic;
using System.Threading.Tasks;

using Deliverystack.DeliveryApi.Models;
using Deliverystack.Models;
using System;
using System.Linq;

public class Breadcrumb : ViewComponent
    public class BreadcrumbModel
        public PathApiEntryModel[] Ancestors { get; set; }
        public PathApiEntryModel Self { get; set; }

        public static BreadcrumbModel GetFromResults(PathApiResultModel data)
            var result = new BreadcrumbModel();
            var enumerator = data.Entries.GetEnumerator();
            List<PathApiEntryModel> entries = new List<PathApiEntryModel>();
            while (enumerator.MoveNext())
            result.Ancestors = entries.ToArray().Take(entries.Count - 1).ToArray();
            result.Self = entries.Last();
            return result;

    private PathApiClient _client;

    public Breadcrumb(PathApiClient client)
        _client = client;

    // May 18 2021 - logic is synchronous and lightweight; ignore warnings about async
    #pragma warning disable CS1998
    public async Task<IViewComponentResult> InvokeAsync()
        return View(BreadcrumbModel.GetFromResults(
            _client.Get(new PathApiBindingModel() 
                { Path = this.HttpContext.Request.Path, Ancestors = Int32.MaxValue })));
    #pragma warning restore CS1998 // Rethrow to preserve stack details

Here is the razor view template for this class.

@model Breadcrumb.BreadcrumbModel

    foreach (var ancestor in Model.Ancestors)
        <a href="@ancestor.Url">@ancestor.NavTitle</a> @: &gt; 

    if (Model.Self != null)

Here is invoking this razor pages view component from the layout.

@await Component.InvokeAsync("Breadcrumb")

One thought on “SaaS Headless CMS ASP.NET Core Razor Pages Data-Driven Breadcrumb View Component

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: