Using Contensis with .Net Razor Pages
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
git clone https://github.com/contensis/razor-page-leif-example.git
Change directory to the Leif example folder
cd RazorPageLeifExample
Run with hot reloading
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))…</p>
}
@if (blogItem.Category != null) {
<span class="category">@blogItem.Category.Name</span>
}
</div>
</a>
</li>
}
</ul>
} else {
<p>No blogs found</p>
}