Headless CMS ASP.NET Razor Pages Partial View Component Architecture

This blog post provides an example of using a modular field in the Contentstack SaaS headless CMS to let the CMS user select an ASP.NET Core Razor Pages partial view to render each block. This blog post depends on information and code provided in the following previous blog posts.

• .NET Core Headless CMS Entry Models and Entry Model Classes – Deliverystack.net
• Generic Base Class with JsonConverter for Contentstack Block Model Classes – Deliverystack.net
• Expose Headless CMS Entry JSON in Entry Models, ASP.NET Core Razor Pages Edition – Deliverystack.net
• Prototype Content Delivery .NET Typed Clients for the Contentstack SaaS Headless CMS – Deliverystack.net
• ASP.NET Core Razor Pages and SaaS Headless Content Management Systems – Deliverystack.net
• Block Models and JsonConverters without the Contentstack .NET SDK – Deliverystack.net
• Specify ASP.NET Razor Core Pages Layouts and Partial Views with Headless CMS – Deliverystack.net
• Use .NET Attributes to Specify Entry Model Classes for CMS Content Types – Deliverystack.net

It may be a lot to take in conceptually, and there is a bit of code to it, so after describing how the solution works, I will recap the files and architecture.

This solution allows the CMS user editing an entry to select an ASP.NET Razor Pages layout view template (_*.cshtml) to apply to the entry and a partial view (__*.cshtml) to invoke. Within a modular field of the entry, they can create and order any number of blocks to contain field values. Each block contains a field to let the CMS user select a partial view to apply to the data in the block.

I apologize for these images that are based on the default ASP.NET Razor Pages project template with simple data and output intend to show functionality rather than design. Basically, each page can have a title and some number of blocks, where each block can have a date or a piece of text.

Here is the content type definition with the date block definition selected.

Here is a simple entry based on that content type.

Here is how it appears rendered.

Here is how it appears after re-ordering the blocks.

Here is the same page with the alternate partial view.

This implementation touched or updated 23 files.

• Prototype Content Delivery .NET Typed Clients for the Contentstack SaaS Headless CMS – Deliverystack.net
  • appsettings.json
  • Core/DeliveryClient/ContentstackDeliveryClient.cs: Retrieves entry JSON from Contentstack.
  • Core/DeliveryClient/ContentstackDeliveryClientOptions.cs: Contentstack configuration properties.
  • Core/DeliveryClient/EntryIdentifier.cs: Identify an entry in a content delivery provider.
  • Core/DeliveryClient/IContentDeliveryClient.cs: Interface for content delivery clients.
• Use .NET Attributes to Specify Entry Model Classes for CMS Content Types – Deliverystack.net
  • Core/Attributes/AttributeBase.cs: Base class for .NET attributes; contains logic for identifying types that have the attribute defined.
  • Core/Attributes/ContentTypeIdentifier.cs: .NET attribute to associate CMS content types with entry model classes.
• .NET Core Headless CMS Entry Models and Entry Model Classes – Deliverystack.net
  • Core/Models/EntryModelBase.cs: Base class for entry models.
  • Core/Models/ExampleBlocksEntryModel.cs: Entry model for content type with example blocks modular field.
• Block Models and JsonConverters without the Contentstack .NET SDK – Deliverystack.net
  • Core/Models/ExampleBlocks/DateBlock.cs: Example block model containing a date field.
  • Core/Models/ExampleBlocks/ExampleBlockBase.cs: Base class for example block models.
  • Core/Models/ExampleBlocks/ExampleBlockTypeEnum.cs: Types of example blocks.
  • Core/Models/ExampleBlocks/TextBlock.cs: Example block model containing a text field.
  • Core/Models/ModularBlockBase.cs: Base class for block models for modular fields.
  • Pages/Shared/__date.cshtml: Partial view to render example date blocks.
  • Pages/Shared/__text.cshtml: Partial view to render example text blocks.
• ASP.NET Core Razor Pages and SaaS Headless Content Management Systems – Deliverystack.net
  • Core/Models/PageModelBase.cs: Base/default class for page models retrieves and exposes EntryModel retrieved from Contentstack.
  • Pages/Index.cshtml: Razor Pages body template.
  • Pages/Index.cshtml.cs: Razor PageModel for body template (derives from PageModelBase).
  • Pages/Shared/_Layout.cshtml: Layout shared to all entries.
  • Pages/Shared/__alternate.cshtml: Alternate partial view uses JavaScript to access entry JSON
  • Pages/Shared/__exampleblocks.cshtml: Partial view used to render example modular blocks.
• Startup.cs: Dependency injection and JSON serialization configuration
  • Block Models and JsonConverters without the Contentstack .NET SDK – Deliverystack.net
  • ASP.NET Core Razor Pages and SaaS Headless Content Management Systems – Deliverystack.net

This solution lets the CMS user create blocks of content, select which partial view to apply to each block, drag and drop blocks to change their order, and otherwise manage component data and presentation together.

WordPress won’t let me upload a zip of the solution, but this link to an archive in my OneDrive public temp folder should work for anyone is interested in giving this a test run, until I change the delivery token (which provides read-only access to Contentstack) or the link breaks, in which case feel free to contact me for current code.

• https://1drv.ms/u/s!Ak4T0TTB5Wlkjf5ih1SB-pt7yE0Fkg?e=PDMRow

Update 12.July.2021: Sorry, that link is broken. This github should have updated bits anyway, but the HTML pieces are in a separate place now:

• deliverystack/deliverystack: ASP.NET Core Framework for Headless CMS (starting with Contentstack) with ASP.NET Core Razor Pages support (github.com)
• deliverystack/HeadlessArchitect: Demo site using deliverystack headless CMS framework with ASP.NET Core razor pages (github.com)

And no, I don’t know how to use git. I am not a developer.

Update 13.May.2021: ASP.NET Core Web API Prototype, Part I: .NET Web API Server/Client Overview – Deliverystack.net