Technologies - .Net

Using Contensis with .Net Razor Pages

Created by r.bromley, last updated 12 May 2022

This step by step guide will take you through getting your entries from Contensis and displaying them using the Delivery API and a simple Razor Page app.

Requirements

Git
Command line interface knowledge

Visual Studio

Visual Studio 2022 with the ASP.NET and web development workload.

VS Code

Using the demo project

This app will pull in data from the Leif project in Contensis.

To get started:

Clone the Contensis React project

Bash

git clone https://github.com/contensis/razor-page-leif-example.git

Change directory to the Leif example folder

Bash

cd RazorPageLeifExample

Run with hot reloading

Bash

dotnet watch

The Razor Pages example will open up in your browser.

If you get any errors, make sure the following are installed:

How it works

Include the Contensis Delivery API helper

The Contensis Delivery API helper contains classes to perform the repetitive tasks of retrieving content from the API.

Include an instance of Zengenti.Contensis.Delivery:

// Program.cs
using Zengenti.Contensis.Delivery;

Set the connection details globally

// Program.cs
ContensisClient.Configure(new ContensisClientConfiguration(
    rootUrl: "<root-url>",
    projectApiId: "<projectApiId>",
    clientId: "clientId",
    sharedSecret: "<sharedSecret>"
));

Create a class for each Content Type

For example, the Blog content type:

// Models/BlogPost.cs
using Zengenti.Contensis.Delivery;

namespace RazorPageLeifExample.Models {
    public class BlogPost: EntryModel { // EntryModel gives us access to the Sys object for ID
        public string Title { get; set; } = null!; // Null forgiving - Title can't be null
        public string? LeadParagraph { get; set; }
        public Image? ThumbnailImage { get; set; }
        public Person? Author => Resolve<Person>("author"); // Resolve linked entry so fields are available
        public Category? Category => Resolve<Category>("category"); // Resolve linked entry so fields are available
        public ComposedField? PostBody { get; set; }
    }
}

Get a single blog entry by its ID

Connect to the Contensis Delivery API

// Pages/Blog.cshtml.cs
var client = ContensisClient.Create();

Pass this class to client.Entries.Get to return a strongly typed BlogPost.

// Pages/Blog.cshtml.cs
// Set the model
public BlogPost? BlogPostModel { get; set; }

public void OnGet()
{
    // Connect to the Contensis delivery API
    // Connection details set in /Program.cs
    var client = ContensisClient.Create();

    // Get the id from the querystring
    string BlogId = HttpContext.Request.Query["id"];

    // Get the entries by the id
    BlogPostModel = client.Entries.Get<BlogPost>(BlogId);
}

Use the model in the view

<!-- Pages/Blog.cshtml -->
<div class="blog-hero">
  <h1 class="blog-hero__title">
    @Model.BlogPostModel.Title
  </h1>
  @if(Model.BlogPostModel.ThumbnailImage != null) {
    <img class="blog-hero__img" src="@("http://live.leif.zenhub.contensis.cloud" + Model.BlogPostModel.ThumbnailImage.Asset.Uri)" alt="@Model.BlogPostModel.ThumbnailImage.AltText"/>
  }
</div>

Get a list of blogs

More information on search queries can be found here: https://www.contensis.com/help-and-docs/apis/delivery-dotnet/search/query-operators

// Pages/Index.cshtml.cs
// Set the model
  public PagedList<BlogPost>? BlogsPayload { get; set; }
  public void OnGet()
  {
      ViewData["Title"] = "Blogs";

      // Connect to the Contensis delivery API
      // Connection details set in /Program.cs
      var client = ContensisClient.Create();

      // Query the api for entries with a content type of "blogPost"
      // Get the latest versions even if not yet published
      var blogsQuery = new Query(
          Op.EqualTo("sys.contentTypeId", "blogPost"),
          Op.EqualTo("sys.versionStatus", "latest")
      );

      // Get a list of entries matching the blogsQuery
      BlogsPayload = client.Entries.Search<BlogPost>(blogsQuery);
  }

Use the model in the view

<!-- Pages/Index.cshtml -->
@if ((Model.BlogsPayload != null) && (Model.BlogsPayload.TotalCount > 0)) {
    <ul class="blogs">
        @foreach (var blogItem in Model.BlogsPayload.Items) {
            <li class="blog-card">
                <a href="@("/blog?id=" + blogItem.Sys.Id)">
                    <h2 class="blog-card__title mobile">@blogItem.Title</h2>
                    @if (blogItem.ThumbnailImage != null) {
                        <img class="blog-card__img" src="@("http://live.leif.zenhub.contensis.cloud" + blogItem.ThumbnailImage.Asset.Uri)" alt="@blogItem.ThumbnailImage.AltText" />
                    }
                    <div class="related-blog__content">
                    <h2 class="blog-card__title desktop">@blogItem.Title</h2>
                    <!-- Truncate text as it can sometimes be too long -->
                    @if (blogItem.LeadParagraph != null) {
                        <p class="blog-card__text">@blogItem.LeadParagraph.Substring(0, Math.Min(blogItem.LeadParagraph.Length, 124))&hellip;</p>
                    }
                    @if (blogItem.Category != null) {
                        <span class="category">@blogItem.Category.Name</span>
                    }
                    </div>
                </a>
            </li>
        }
    </ul>
} else {
    <p>No blogs found</p>
}