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.

• SaaS Headless CMS ASP.NET Core Razor Pages Data-Driven Top Navigation View Component – Deliverystack.net

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())
                entries.Add(enumerator.Current);
            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)
    {
        @Model.Self.NavTitle
    }
}

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

@await Component.InvokeAsync("Breadcrumb")